Browse all Angular 2 lessons.

showing All 184 lessons...

Add Inputs to Angular Directives

P

Write an Angular Directive

Modify status bar colors on iOS and Android with NativeScript

Create a custom app theme using SASS for NativeScript

Use the nativescript-themes plugin to switch app themes on the fly

Integrate a custom NativeScript UI component plugin via npm and registerElement

Bind data to NativeScript Angular components using RxJS Observables

Display lists using NativeScript’s ListView component

Open an Angular component in a native iOS and Android popup modal

Handle back navigation when using page-router-outlet

Create a page title using ActionBar

Add styles to active routes using nsRouterLinkActive

Add native mobile page navigation using Angular Router

Edit with live reloading using NativeScript livesync

Style NativeScript views using the default core theme

Style NativeScript views using CSS

Create native mobile views using NativeScript XML

Preview NativeScript Apps in the GenyMotion Android emulator

Preview NativeScript apps in the iOS Simulator

Set up a native mobile app using the NativeScript CLI

Define Two-Way Transitions for Angular States

P

Animate Adding and Removing Angular Elements with ngIf

P

Use Keyframes for Fine-Tuned Angular Animations

P

Delay and Ease Angular Animations

P

Animate Between Angular States Using Transitions

P

Control Undefined Angular States with void State

P

Switch Between Angular States on a Trigger

Define an Angular Trigger and State

Share Template Content In Another Template With Content Projection

P

Generate components with the Angular CLI

P

Install the Angular CLI to Create and Serve an Angular Application

P

Apply CSS Classes Conditionally with Angular 2’s ngClass

Pass Events from Angular 2 Components with @Output

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

P

Pick Up Angular 2 in 6 Minutes

P

Check ngModel Validation in Angular 2

P

Create a Basic Angular 2 ngModel Input

Use RxJS Streams with Angular 2 Forms

P

Understand the Angular 2 States of Inputs: Pristine and Untouched

P

Create Radio Buttons for Angular 2 Forms

P

Build Select Dropdowns for Angular 2 Forms

P

Style Validation in Angular 2 Forms

P

Group Inputs in Angular 2 Forms with ngModelGroup

P

Display Validation and Error Messaging in Angular 2

P

Create and Submit an Angular 2 Form using ngForm

P

Generate and Render Angular 2 Template Elements in a Component

P

Build fully reactive APIs in Angular 2 with Observables

P

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

P

Deal with out of order responses in Angular 2 using switchMap

P

Combine Observables in Angular 2 with flatMap

P
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.

angular2 tutorial about Write an Angular Directive

Write an Angular Directive

1:42 angular2

Angular Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

angular2 tutorial about Modify status bar colors on iOS and Android with NativeScript

Modify status bar colors on iOS and Android with NativeScript

2:22 angular2

Learn how to programmatically change the status bar text color on iOS and Android as well as the background color. The lesson also covers how to adjust the text color to be dark on Android in cases where the status bar color may be light.

angular2 tutorial about Create a custom app theme using SASS for NativeScript

Create a custom app theme using SASS for NativeScript

3:38 angular2

Learn how to extend the SASS that ships with the nativescript-theme-core plugin to create your very own custom app theme. The setup takes advantage of common styling across iOS and Android as well as how to handle platform specific css. You can find a full list of SASS variables that can be overridden here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss You can also find a full list of baseline variable sets to base custom stylesheets within this section on the docs: http://docs.nativescript.org/ui/theme#color-schemes

angular2 tutorial about Use the nativescript-themes plugin to switch app themes on the fly

Use the nativescript-themes plugin to switch app themes on the fly

3:18 angular2

Learn how use the nativescript-themes plugin to swap out entire stylesheets on the fly to provide theme switching for your app's users. Also covers how to ensure your app remembers which theme the user chose last before the app closed to apply their preferred theme next time they open it.

angular2 tutorial about Integrate a custom NativeScript UI component plugin via npm and registerElement

Integrate a custom NativeScript UI component plugin via npm and registerElement

2:58 angular2

Plugins are the key to unlocking many rich features of the native platforms. Let’s learn how to integrate the nativescript-checkbox plugin to register a new custom UI component for use in our views.

angular2 tutorial about Bind data to NativeScript Angular components using RxJS Observables

Bind data to NativeScript Angular components using RxJS Observables

1:06 angular2

Learn how to use standard RxJS Observables for your native view bindings using the power of Angular’s async pipe.

angular2 tutorial about Display lists using NativeScript’s ListView component

Display lists using NativeScript’s ListView component

2:14 angular2

The NativeScript ListView component uses the native platform list controls under the hood for superior performance and native virtual scrolling (ListView widget on Android and UITableView on iOS).

angular2 tutorial about Open an Angular component in a native iOS and Android popup modal

Open an Angular component in a native iOS and Android popup modal

5:32 angular2

Let’s build a new Angular component and use NativeScript for Angular’s ModalDialogService to open it in a native modal. We will also look at special considerations with handling the close action in addition to passing data between the modal and the caller.

angular2 tutorial about Handle back navigation when using page-router-outlet

Handle back navigation when using page-router-outlet

1:37 angular2

Learn how to handle special cases with back navigation when using the page-router-outlet.

angular2 tutorial about Create a page title using ActionBar

Create a page title using ActionBar

0:21 angular2

Learn how to use the ActionBar component to provide a title for your mobile view.

angular2 tutorial about Add styles to active routes using nsRouterLinkActive

Add styles to active routes using nsRouterLinkActive

1:11 angular2

Learn how to use the nsRouterLinkActive directive with options to control styling when a route is active.

angular2 tutorial about Add native mobile page navigation using Angular Router

Add native mobile page navigation using Angular Router

6:14 angular2

Learn how to use the Angular Router to setup page navigation using NativeScript for Angular’s unique page-router-outlet directive in conjunction with the standard router-outlet to achieve a flexible routing setup.

angular2 tutorial about Edit with live reloading using NativeScript livesync

Edit with live reloading using NativeScript livesync

1:13 angular2

Learn how to use the livesync option to make quick changes to css and/or Angular components to see live updates in the emulators or on devices. Also learn how to run livesync simultaneously on iOS and Android.

angular2 tutorial about Style NativeScript views using the default core theme

Style NativeScript views using the default core theme

2:35 angular2

The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common btn classes for Buttons, h1, h2, etc. Label classes and convenient p-10 or m-10 (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme

angular2 tutorial about Style NativeScript views using CSS

Style NativeScript views using CSS

2:05 angular2

Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like horizontal-align that are unique to native platforms.

angular2 tutorial about Create native mobile views using NativeScript XML

Create native mobile views using NativeScript XML

3:24 angular2

This is the fundamental building block for native views. Let’s understand the syntax and some of the options available to us to construct our views starting with Layout Containers. StackLayout and GridLayout containers are the most commonly used. Also learn about helpful snippets for a few popular IDE’s.

angular2 tutorial about Preview NativeScript Apps in the GenyMotion Android emulator

Preview NativeScript Apps in the GenyMotion Android emulator

1:36 angular2

We can run our app in an Android emulator using GenyMotion, which provides flexible options and great performance. Let’s learn how to set one up and run our app in it. First install the Android SDK by installing Android Studio here: https://developer.android.com/studio/index.html. Then register for a GenyMotion account here: https://www.genymotion.com/account/create/. Once created and logged in, you will see a ‘Download’ button in the header where you can download the free tools.

angular2 tutorial about Preview NativeScript apps in the iOS Simulator

Preview NativeScript apps in the iOS Simulator

1:10 angular2

We can run our app in the iOS Simulator using the tns command line utilities. Also learn how to target specific simulator devices and versions. You must have a Mac to develop apps for iOS. Ensure you have XCode installed via the Mac App Store, and ensure you have opened it at least once to agree to the terms and install the additional components it may prompt about.

angular2 tutorial about Set up a native mobile app using the NativeScript CLI

Set up a native mobile app using the NativeScript CLI

0:59 angular2

We will install the NativeScript CLI and use it to generate a project.

angular2 tutorial about Define Two-Way Transitions for Angular States

Define Two-Way Transitions for Angular States

1:53 angular2 PRO

You often want to re-use a transition when going between the same two states. Angular transition syntax allows you to define how the transition should be applied between states: one-way or two-way.

angular2 tutorial about Animate Adding and Removing Angular Elements with ngIf

Animate Adding and Removing Angular Elements with ngIf

1:49 angular2 PRO

A common use-case for an Angular animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

angular2 tutorial about Use Keyframes for Fine-Tuned Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

2:15 angular2 PRO

When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular animation you want.

angular2 tutorial about Delay and Ease Angular Animations

Delay and Ease Angular Animations

3:11 angular2 PRO

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

angular2 tutorial about Animate Between Angular States Using Transitions

Animate Between Angular States Using Transitions

1:11 angular2 PRO

The foundation of animation in Angular is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.

angular2 tutorial about Control Undefined Angular States with void State

Control Undefined Angular States with void State

2:05 angular2 PRO

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

angular2 tutorial about Switch Between Angular States on a Trigger

Switch Between Angular States on a Trigger

1:04 angular2

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

angular2 tutorial about Define an Angular Trigger and State

Define an Angular Trigger and State

1:32 angular2

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

angular2 tutorial about Share Template Content In Another Template With Content Projection

Share Template Content In Another Template With Content Projection

1:13 angular2 PRO

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 and given super powers.

In this lesson learn how to setup content projection and upgrade it to support multiple projections with encapsulated functionality.

angular2 tutorial about Generate components with the Angular CLI

Generate components with the Angular CLI

1:21 angular2 PRO

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.

angular2 tutorial about Install the Angular CLI to Create and Serve an Angular Application

Install the Angular CLI to Create and Serve an Angular Application

1:17 angular2 PRO

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 lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

angular2 tutorial about Apply CSS Classes Conditionally with Angular 2’s ngClass

Apply CSS Classes Conditionally with Angular 2’s ngClass

2:10 angular2

ngClass is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so ngClass comes to the rescue.

angular2 tutorial about Pass Events from Angular 2 Components with @Output

Pass Events from Angular 2 Components with @Output

3:54 angular2

Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use @Output to create an update event and then listen for the event in your application.

angular2 tutorial about Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

2:11 angular2 PRO

Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.

angular2 tutorial about Pick Up Angular 2 in 6 Minutes

Pick Up Angular 2 in 6 Minutes

6:09 angular2 PRO

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 the Angular 2 components so that you can start building quickly.

angular2 tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular2 PRO

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the #ref syntax, assigning it a name, then ngModel will check all of the validity rules for you.

angular2 tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular2

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

This lesson starts with a Angular 2 hello world app. To quickly set that up use the angular cli which will set up the boilerplate needed to get started.

angular2 tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular2 PRO

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

angular2 tutorial about Understand the Angular 2 States of Inputs: Pristine and Untouched

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular2 PRO

Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

angular2 tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular2 PRO

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and for attributes as well as how to style validation of radio buttons.

angular2 tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular2 PRO

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes.

angular2 tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular2 PRO

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-valid and .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Component decorator.

angular2 tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular2 PRO

The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is often used in combination with fieldset as they mostly represent the same idea of “grouping together inputs.”

angular2 tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular2 PRO

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

angular2 tutorial about Create and Submit an Angular 2 Form using ngForm

Create and Submit an Angular 2 Form using ngForm

2:41 angular2 PRO

Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s ngForm allows you to get a reference to that object and validity and use them to display information about the form or use the ngSubmit event to save information from the form.

angular2 tutorial about Generate and Render Angular 2 Template Elements in a  Component

Generate and Render Angular 2 Template Elements in a Component

1:25 angular2 PRO

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.

angular2 tutorial about Build fully reactive APIs in Angular 2 with Observables

Build fully reactive APIs in Angular 2 with Observables

1:58 angular2 PRO

In this video you'll learn how Observables can improve the overall API design by designing APIs that accept Observables as arguments

angular2 tutorial about Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

1:15 angular2 PRO

In this video you'll learn how to use the distinctUntilChanged operator to prevent making unnecessary requests.

angular2 tutorial about Deal with out of order responses in Angular 2 using switchMap

Deal with out of order responses in Angular 2 using switchMap

1:34 angular2 PRO

In this video you'll learn how to deal with out of order responses using the powerful switchMap operator

angular2 tutorial about Combine Observables in Angular 2 with flatMap

Combine Observables in Angular 2 with flatMap

2:10 angular2 PRO

In this video you'll learn how to combine multiple Observable streams using the flatMap operator

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