Angular 2

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

COURSES 13

WATCH John Lindquist's COURSE

Get Started with Angular

Get Started with Angular

Angular is basically a collection of Components brought together within modules. The many tools, such as the Angular CLI, allow...

13 lessons

WATCH Juri Strumpflohner's COURSE

Understand How to Style Angular Components

Understand How to Style Angular Components

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating...

10 lessons

WATCH Mike Hartington's COURSE

Building apps with Ionic 2

Building apps with Ionic 2

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently framew...

12 lessons

WATCH John Lindquist's COURSE

Building Angular Components

Building Angular Components

Angular has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a...

16 lessons

WATCH John Lindquist's COURSE

Understand Angular Directives in Depth

Understand Angular Directives in Depth

Angular Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components ...

11 lessons

WATCH John Lindquist's COURSE

Learn the Basics of Angular Forms

Learn the Basics of Angular Forms

Angular makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through ho...

10 lessons

WATCH Pascal Precht's COURSE

Angular Dependency Injection (DI) Explained

Angular Dependency Injection (DI) Explained

This course will teach you the ins and outs of dependency injection in Angular. You will learn what dependency injection means,...

8 lessons

WATCH John Lindquist's COURSE

Animate Angular Web Applications

Animate Angular Web Applications

Angular comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, s...

8 lessons

WATCH Christoph Burgdorf's COURSE

Build an Angular Instant Search Component

Build an Angular Instant Search Component

In this course you will learn more about using observables in Angular. We are going to explore the new HTTP service, and how we...

6 lessons

WATCH John Lindquist's COURSE

Manage UI State with the Angular Router

Manage UI State with the Angular Router

Angular's router comes with many features for routing based on path's and loading specific components. This course gives you an...

11 lessons

WATCH Nathan Walker's COURSE

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. In this cours...

12 lessons

WATCH John Lindquist's COURSE

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Angular has many built-in features for working closely with RxJS to help you build fully reactive applications. This course wil...

16 lessons

WATCH Nathan Walker's COURSE

Create Native Mobile Apps with NativeScript for Angular

Create Native Mobile Apps with NativeScript for Angular

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting s...

18 lessons

Build and deploy your Angular app to Firebase Hosting

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and conf...

Juri Strumpflohner
2:58

Setup automated deployment with Angular, Travis and Firebase

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by u...

Juri Strumpflohner
7:48

Bind async requests in your Angular template with the async pipe and the "as" keyword

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especi...

Juri Strumpflohner
4:51

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage ...

Juri Strumpflohner
2:07

Create iOS custom UIViewController components with NativeScript for Angular

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCEx...

Nathan Walker
10:00

Share Template Content In Another Template With Content Projection

Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection...

Mike Brocchi
1:13

Generate components with the Angular CLI

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Mike Brocchi
1:21

Install the Angular CLI to Create and Serve an Angular Application

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications. In this l...

Mike Brocchi
1:17

Pick Up Angular 2 in 6 Minutes

Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of th...

John Lindquist
6:09

Angular 2 - Building a Toggle Button Component

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable c...

John Lindquist
7:28

Using the Async Pipe in Angular 2

The Async Pipe in Angular 2 can reduce boilerplate and mental overhead when dealing with observables and promises. This lesson explores how the Async Pipe works, the code it eliminates, and demonst...

Brian Troncone
5:27

@ngrx/store in 10 minutes

@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management ...

Brian Troncone
10:49

Browse all Angular 2 lessons.

showing All 183 lessons...

Use the Renderer2 to add styles to an element in Angular

P

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

P

Use :host-context and the ::ng-deep selector to apply context-based styling

P

Style HTML elements in Angular using ngStyle

P

Use Angular style sanitization to mark dynamic styles as trusted values

P

Style HTML elements in Angular using ngClass

P

Conditionally add a single CSS class to a DOM element in Angular

P

Use Angular style encapsulation to avoid styles from leaking into other components

Add styles to a component in Angular

Intercept HTTP requests in Angular

Build and deploy your Angular app to Firebase Hosting

P

Setup automated deployment with Angular, Travis and Firebase

P

Bind async requests in your Angular template with the async pipe and the "as" keyword

P

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

P

Style HTML elements in Angular using the style property

P

Create an Overlay Component with the Ionic 2 Overlay API

P

Preview an Angular 2 Mobile App with Ionic Lab

P

Create Angular 2 Mobile Card based layouts with Ionic 2

P

Use Ionic 2 NavController to Manipulate App History

P

Create a Native Mobile Side Menu Layout in Ionic 2

P

Navigate Between Mobile Screens with the Ionic 2 NavController

P

Lazy Load Data with Ionic 2

P

Fetch data from an API using Angular 2 HTTP module

P

Use Sliding Gestures to Reorder an Ionic 2 List

P

Build your first page component with Ionic 2

P

Use the Ionic CLI to Generate Angular 2 Mobile Components

P

Start an Ionic 2 App with the CLI

P

Create iOS custom UIViewController components with NativeScript for Angular

P

Use an Android library in NativeScript for Angular using Java apis

P

Use Objective C Delegates in NativeScript for Angular iOS apps

P

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

P

Develop a public NativeScript plugin using the nativescript-plugin-seed

P

Conditionally require a NativeScript plugin when only a single platform is supported

P

Build a custom NativeScript view component for iOS

P

Convert a Swift library to NativeScript for Angular iOS apps

P

Develop a consistent plugin api across your Android and iOS NativeScript app

P

Use an Objective C library in NativeScript for Angular iOS app

P

Build a custom NativeScript view component for Android

P

Translate common Java/Android APIs into NativeScript for Angular Android apps

P

Prepare for native iOS and Android api intellisense with NativeScript

P

Implement Structural Directive Data Binding with Context in Angular

P

Assign a Structual Directive a Dynamic Context in Angular

P

Create a Template Storage Service in Angular

P

Combine HostBinding with Services in Angular Directives

P

Write a Structural Directive in Angular

P

Use Template Elements in Angular

P

Create Elements from Template Elements with ngTemplateOutlet in Angular

P

Build a Directive that Tracks User Events in a Service in Angular

P

Handle Events with Angular Directives

P

Add Inputs to Angular Directives

P
angular2 tutorial about Use the Renderer2 to add styles to an element in Angular

Use the Renderer2 to add styles to an element in Angular

2:14 angular2 PRO

In this lesson we will go low-level and learn how you can get hold of the underlying native DOM element to add styling. Moreover we will learn how to make use of the Render2 to safely add style properties which even work in a server-side environment.

angular2 tutorial about Use Angular’s @HostBinding and :host(...) to add styling to the component itself

Use Angular’s @HostBinding and :host(...) to add styling to the component itself

2:58 angular2 PRO

One thing that we can do is to add styles directly to HTML elements that live within our component. However, in this lesson we see that style classes added to your template HTML within your component get applied to an inner <div> and not your component host. We will learn how to use :host(...) and @HostBinding to add styling directly to the component host itself.

angular2 tutorial about Use :host-context and the ::ng-deep selector to apply context-based styling

Use :host-context and the ::ng-deep selector to apply context-based styling

3:26 angular2 PRO

Often components need to be styled based on the context they are being placed in. In this lesson we will learn about how to apply styles conditionally to our component, based on our ancestor element styles using :host-context. In the very same way, we also explore how to leverage the /deep/ shadow DOM selector to target styles to child components.

Note that the ::ng-deep is only a temporary solution and is going to be dropped by Angular once there’s an official standard coming out. As such try to avoid using it.

angular2 tutorial about Style HTML elements in Angular using ngStyle

Style HTML elements in Angular using ngStyle

3:39 angular2 PRO

We will learn how to make use of the ngStyle directive to directly add multiple style attributes to a DOM element as a style property. We’ll also learn how we can make these styles more dynamic through user input.

angular2 tutorial about Use Angular style sanitization to mark dynamic styles as trusted values

Use Angular style sanitization to mark dynamic styles as trusted values

3:33 angular2 PRO

Angular has a very robust security model. Dynamically inserted html, style or url values into the DOM open up possibilities for attackers to compromise your site. Thus Angular treats all values as untrusted by default. In this lesson we learn how to “sanitize” values where we are sure they are trustful.

angular2 tutorial about Style HTML elements in Angular using ngClass

Style HTML elements in Angular using ngClass

3:17 angular2 PRO

When we want to add multiple CSS classes on our HTML elements, and possibly even by using some kind of condition, things might get complicated… Fortunately ngClass is here to help! We will learn about the various ways ngClass allows us to conditionally add multiple classes to HTML elements using a variety of different data structures.

angular2 tutorial about Conditionally add a single CSS class to a DOM element in Angular

Conditionally add a single CSS class to a DOM element in Angular

1:35 angular2 PRO

Angular allows you to add a single CSS class to HTML elements within your component and bind them to a condition. Based on the result of the condition the class gets applied or not.

angular2 tutorial about Use Angular style encapsulation to avoid styles from leaking into other components

Use Angular style encapsulation to avoid styles from leaking into other components

3:11 angular2

One of the big challenges of creating truly reusable components is to make sure their styles don’t leak out into the consuming application. Strategies such as CSS modules work but are suboptimal. The web component movement tries to bring a definitive solution to this dilemma but browser support is still lacking. In this lesson we will take a look how Angular helps us with this.

angular2 tutorial about Add styles to a component in Angular

Add styles to a component in Angular

2:21 angular2

Angular gives you two possibilities: externally link a stylesheet to your component, which is a great option when you have a lot of CSS code that might make your Component look messy; or embed it inline, which you might want to do when you only have a bit of CSS you want to apply. In this lesson we will take a deeper look at the advantages of both of these methods.

Intercept HTTP requests in Angular

7:35 angular2

Being able to intercept HTTP requests is crucial in a real world application. Whether it is for error handling and logging or for injecting authentication tokens. While in Angular version 2 it intercepting HTTP requests was totally possible, implementing it wasn't that trivial and intuitive. Starting from Angular version 4.3.1 there is a new, way more simpler approach of implementing HTTP interceptors. In this lesson we're going to explore how.

Build and deploy your Angular app to Firebase Hosting

2:58 angular2 PRO

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and configure our Angular project for deploying it to Firebase Hosting.

Setup automated deployment with Angular, Travis and Firebase

7:48 angular2 PRO

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by using GitHub and Travis. By the end of the lesson we will be able to automatically deploy our app with a simple git push to our repository's master branch.

angular2 tutorial about Bind async requests in your Angular template with the async pipe and the "as" keyword

Bind async requests in your Angular template with the async pipe and the "as" keyword

4:51 angular2 PRO

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especially if we want to bind the same data in multiple parts of the template. In this lesson we will learn how we can leverage the async pipe and the as keyword introduced in Angular version 4.0.0 to circumvent such drawbacks.

angular2 tutorial about Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

2:07 angular2 PRO

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simple loading indicator.

angular2 tutorial about Style HTML elements in Angular using the style property

Style HTML elements in Angular using the style property

1:15 angular2 PRO

In this lesson we will take a look at how Angular makes use of the style property. This is a powerful concept that allows us to very easily add CSS styles onto HTML elements. These styles can even be easily made conditional.

angular2 tutorial about Create an Overlay Component with the Ionic 2 Overlay API

Create an Overlay Component with the Ionic 2 Overlay API

3:56 angular2 PRO

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

angular2 tutorial about Preview an Angular 2 Mobile  App with Ionic Lab

Preview an Angular 2 Mobile App with Ionic Lab

1:33 angular2 PRO

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s --lab flag to see what your app will look like before it’s even deployed to a device.

angular2 tutorial about Create Angular 2 Mobile Card based layouts with Ionic 2

Create Angular 2 Mobile Card based layouts with Ionic 2

2:12 angular2 PRO

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like ion-card, ion-card-content, and ion-card-header are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven.

angular2 tutorial about Use Ionic 2 NavController to Manipulate App History

Use Ionic 2 NavController to Manipulate App History

2:32 angular2 PRO

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the documentation

angular2 tutorial about Create a Native Mobile Side Menu Layout in Ionic 2

Create a Native Mobile Side Menu Layout in Ionic 2

3:26 angular2 PRO

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead.

angular2 tutorial about Navigate Between Mobile Screens  with the Ionic 2 NavController

Navigate Between Mobile Screens with the Ionic 2 NavController

3:06 angular2 PRO

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController.

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.

angular2 tutorial about Lazy Load Data with Ionic 2

Lazy Load Data with Ionic 2

2:25 angular2 PRO

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.

Infinite Scroll and Refresher can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

angular2 tutorial about Fetch data from an API using Angular 2 HTTP module

Fetch data from an API using Angular 2 HTTP module

1:43 angular2 PRO

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The IonicModule in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's BrowserModule, HttpModule, FormsModule, and ReactiveFormsModule

angular2 tutorial about Use Sliding Gestures to Reorder an Ionic 2 List

Use Sliding Gestures to Reorder an Ionic 2 List

3:11 angular2 PRO

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

angular2 tutorial about Build your first page component with Ionic 2

Build your first page component with Ionic 2

2:07 angular2 PRO

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

angular2 tutorial about Use the Ionic CLI to Generate Angular 2 Mobile Components

Use the Ionic CLI to Generate Angular 2 Mobile Components

2:17 angular2 PRO

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run ionic g --list in your terminal.

angular2 tutorial about Start an Ionic 2 App with the CLI

Start an Ionic 2 App with the CLI

2:18 angular2 PRO

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.

angular2 tutorial about Create iOS custom UIViewController components with NativeScript for Angular

Create iOS custom UIViewController components with NativeScript for Angular

10:00 angular2 PRO

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCExposedMethods property. Also learn how to save images to the user's iPhone Camera Roll using native api's. Specifically we will look at creating a custom {N} view component for SwiftyCam (a Snapchat inspired implementation: https://github.com/Awalz/SwiftyCam).

angular2 tutorial about Use an Android library in NativeScript for Angular using Java apis

Use an Android library in NativeScript for Angular using Java apis

7:26 angular2 PRO

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at Filestack’s Android SDK built with Gradle. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it.

angular2 tutorial about Use Objective C Delegates in NativeScript for Angular iOS apps

Use Objective C Delegates in NativeScript for Angular iOS apps

7:06 angular2 PRO

Objective C is a very interesting programming language which offers a lot of power as well as interesting paradigms. Let’s look at some Objective C api’s and how they translate to NativeScript. In particular, let’s learn how to wire up iOS delegates using Filestack's FSPickerDelegate as an example. We will also look at handling WeakRef’s and iterating an NSArray.

angular2 tutorial about Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

Generate metadata TypeScript declarations for Objective C/Swift libraries on iOS

1:22 angular2 PRO

Learn how to generate TypeScript declaration files for all native api’s for iOS, including any 3rd party Objective C/Swift libraries included in your project via Cocoapods or other means. This will allow you to view all the metadata for included iOS libraries to see what classes and apis are exposed to NativeScript.

angular2 tutorial about Develop a public NativeScript plugin using the nativescript-plugin-seed

Develop a public NativeScript plugin using the nativescript-plugin-seed

4:16 angular2 PRO

Learn how to use the nativescript-plugin-seed to kick start your NativeScript plugin development rapidly. Let’s examine best practices when developing a plugin api for public consumption, project organization, and how to publish it to npm. It will also show up within 1 day on the Offical Source for NativeScript Plugins.

angular2 tutorial about Conditionally require a NativeScript plugin when only a single platform is supported

Conditionally require a NativeScript plugin when only a single platform is supported

2:05 angular2 PRO

Sometimes a NativeScript plugin may only support 1 platform (iOS or Android). In these cases, we will want to conditionally require the plugin to ensure we don’t crash the other unsupported platform. Let’s consider view and service level implications for how best to handle these scenarios.

angular2 tutorial about Build a custom NativeScript view component for iOS

Build a custom NativeScript view component for iOS

8:26 angular2 PRO

Building a custom NativeScript XML view component for iOS entails several interesting notes, like overriding the onLoaded method of the base NativeScript View class. Let’s look at how to properly build a custom component based on an underlying native view widget with NativeScript XML which may come from a CocoaPod. We will learn several important aspects regarding Objective C properties and methods you will need to consider. In particular, we will implement this Objective C view component

angular2 tutorial about Convert a Swift library to NativeScript for Angular iOS apps

Convert a Swift library to NativeScript for Angular iOS apps

6:33 angular2 PRO

Swift is an exciting and intuitive programming language developed by Apple to be easier to learn than Objective C. It's syntax also more closely resembles JavaScript. Some native libraries you could work with may have been developed with Swift. Let’s look at a couple cases you could run into when trying to work with a Swift based iOS library. In particular, we will be implementing this Swift 3.0 CocoaPod. Also learn how to write files to your app’s document folder using NativeScript’s ‘file-system’ module.

angular2 tutorial about Develop a consistent plugin api across your Android and iOS NativeScript app

Develop a consistent plugin api across your Android and iOS NativeScript app

9:44 angular2 PRO

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

angular2 tutorial about Use an Objective C library in NativeScript for Angular iOS app

Use an Objective C library in NativeScript for Angular iOS app

9:57 angular2 PRO

We will learn how to install an Objective C library distributed via a CocoaPod into our project and expose its native api to our app. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it. Take for example Filestack, a really powerful file uploading api that provides an SDK written in JavaScript for the web, but also offers native SDK's for iOS and Android. Let's take a look at how to code right against this native iOS SDK.

angular2 tutorial about Build a custom NativeScript view component for Android

Build a custom NativeScript view component for Android

4:36 angular2 PRO

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the Google I/O 2016 clock. Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the Android app manifest file.

angular2 tutorial about Translate common Java/Android APIs into NativeScript for Angular Android apps

Translate common Java/Android APIs into NativeScript for Angular Android apps

6:20 angular2 PRO

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

angular2 tutorial about Prepare for native iOS and Android api intellisense with NativeScript

Prepare for native iOS and Android api intellisense with NativeScript

1:44 angular2 PRO

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to install tns-platform-declarations to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

angular2 tutorial about Implement Structural Directive Data Binding with Context in Angular

Implement Structural Directive Data Binding with Context in Angular

2:03 angular2 PRO

Just like in *ngFor, you're able to pass in data into your own structural directives. This is done by declaring the variable using a let statement then passing context into the createEmbeddedView call.

angular2 tutorial about Assign a Structual Directive a Dynamic Context in Angular

Assign a Structual Directive a Dynamic Context in Angular

3:01 angular2 PRO

Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.

angular2 tutorial about Create a Template Storage Service in Angular

Create a Template Storage Service in Angular

4:00 angular2 PRO

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app.

angular2 tutorial about Combine HostBinding with Services in Angular Directives

Combine HostBinding with Services in Angular Directives

3:08 angular2 PRO

You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Service even exists.

angular2 tutorial about Write a Structural Directive in Angular

Write a Structural Directive in Angular

3:01 angular2 PRO

Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.

angular2 tutorial about Use Template Elements in Angular

Use Template Elements in Angular

1:33 angular2 PRO

The <template> element is a core piece of building complex UI in Angular. You can get a reference to these elements, then pass them around and create new elements based on them.

angular2 tutorial about Create Elements from Template Elements with ngTemplateOutlet in Angular

Create Elements from Template Elements with ngTemplateOutlet in Angular

2:38 angular2 PRO

ngTemplateOutlet is a directive that simplifies creating elements from template elements. This allows you to create simple, reusable templates then generate elements with custom data whenever you need them.

angular2 tutorial about Build a Directive that Tracks User Events in a Service in Angular

Build a Directive that Tracks User Events in a Service in Angular

3:11 angular2 PRO

A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.

angular2 tutorial about Handle Events with Angular Directives

Handle Events with Angular Directives

1:35 angular2 PRO

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

angular2 tutorial about Add Inputs to Angular Directives

Add Inputs to Angular Directives

2:55 angular2 PRO

The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?