Browse all Angular 2 lessons.

showing All 215 lessons...

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

Debounce the user input in Angular 2 using debounceTime

P

Consuming events as Observables in Angular 2

Understand Angular @Injectable

P

Understand OpaqueToken in Angular

P

Use Angular Value Providers

P

Use Angular Factory Providers

P

Use Angular Factory Providers with dependencies

P

Inject an Angular Service into a Component using Providers

Use Provide and UseClass in Angular Providers

P

Understand Angular Dependency Injection

Create an Angular 2 Hello World Component

Load Data Based on Angular Route Params

P

Load Data to Build Angular Navigation

P

Build Dynamic Angular Navigation with ngFor

P

Understand the Angular Base href Requirement

P

Use Params from Angular Routes Inside of Components

P

Style the Active Angular Navigation Element with routerLinkActive

P

Lazy Load Angular Modules with the Router

P

Build Angular Navigation with routerLink

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

Set up a native mobile app using the NativeScript CLI

0:59 angular

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

angular tutorial about Define Two-Way Transitions for Angular States

Define Two-Way Transitions for Angular States

1:53 angular 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.

angular tutorial about Animate Adding and Removing Angular Elements with ngIf

Animate Adding and Removing Angular Elements with ngIf

1:49 angular 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.

angular tutorial about Use Keyframes for Fine-Tuned Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

2:15 angular 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.

angular tutorial about Delay and Ease Angular Animations

Delay and Ease Angular Animations

3:11 angular 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.

angular tutorial about Animate Between Angular States Using Transitions

Animate Between Angular States Using Transitions

1:11 angular 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.

angular tutorial about Control Undefined Angular States with void State

Control Undefined Angular States with void State

2:05 angular 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”.

angular tutorial about Switch Between Angular States on a Trigger

Switch Between Angular States on a Trigger

1:04 angular

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.

angular tutorial about Define an Angular Trigger and State

Define an Angular Trigger and State

1:32 angular

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.

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

Share Template Content In Another Template With Content Projection

1:13 angular 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.

angular-cli tutorial about Generate components with the Angular CLI

Generate components with the Angular CLI

1:21 angular-cli 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.

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

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

Apply CSS Classes Conditionally with Angular 2’s ngClass

2:10 angular

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.

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

Pass Events from Angular 2 Components with @Output

3:54 angular

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.

angular tutorial about Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

2:11 angular 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.

angular tutorial about Pick Up Angular 2 in 6 Minutes

Pick Up Angular 2 in 6 Minutes

6:09 angular 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.

angular tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular 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.

angular tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular

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.

angular tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular 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.

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

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular 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.

angular tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular 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.

angular tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular 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.

angular tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular 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.

angular tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular 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.”

angular tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular 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.

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

Create and Submit an Angular 2 Form using ngForm

2:41 angular 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.

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

Generate and Render Angular 2 Template Elements in a Component

1:25 angular 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.

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

Build fully reactive APIs in Angular 2 with Observables

1:58 angular PRO

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

angular tutorial about Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

1:15 angular PRO

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

angular 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 angular PRO

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

angular tutorial about Combine Observables in Angular 2 with flatMap

Combine Observables in Angular 2 with flatMap

2:10 angular PRO

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

angular tutorial about Debounce the user input in Angular 2 using debounceTime

Debounce the user input in Angular 2 using debounceTime

1:25 angular PRO

In this video we'll learn how to use the debounceTime operator to tame the user input for an instant search.

angular tutorial about Consuming events as Observables in Angular 2

Consuming events as Observables in Angular 2

3:07 angular

In this video series we’ll take a look at Observables in Angular 2. We’ll figure out how they integrate with the http layer and how we can leverage their power to build a rock solid instant search with just a bunch of operators.

This first video walks you through the process of refactoring an existing solution to consume events from the template as Observables.

angular tutorial about Understand Angular @Injectable

Understand Angular @Injectable

4:27 angular PRO

In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits metadata. In this lesson we’ll explore how the @Injectable decorator ensures metadata generation for services that have their own dependencies.

angular tutorial about Understand OpaqueToken in Angular

Understand OpaqueToken in Angular

3:53 angular PRO

When using provider string tokens, there’s a chance they collide with other third-party tokens. Angular has with the concept of opaque tokens, that allow us to make whatever token we use unique, so we don’t run into collision problems. In this lesson we’ll explore how they work.

angular tutorial about Use Angular Value Providers

Use Angular Value Providers

3:00 angular PRO

Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really want is inject a simple value, which can be a primitive, or maybe just a configuration object. For these cases, we can use value providers and in this lesson we’ll discuss, how they are created.

angular tutorial about Use Angular Factory Providers

Use Angular Factory Providers

3:29 angular PRO

In this lesson, we discuss how and when to use factory providers, to enable dependencies that shouldn’t be available to Angular’s DI.

angular tutorial about Use Angular Factory Providers with dependencies

Use Angular Factory Providers with dependencies

3:00 angular PRO

This lesson discusses when and how to add dependencies, resolved by Angular’s DI, to factory providers. The example used in this lesson builts upon the previous lesson on understanding factory providers.

angular tutorial about Inject an Angular Service into a Component using Providers

Inject an Angular Service into a Component using Providers

3:07 angular

This lesson explains how we can inject simple service dependencies into Angular 2 components using providers. We’ll also discuss what providers are and why they are needed.

angular tutorial about Use Provide and UseClass in Angular Providers

Use Provide and UseClass in Angular Providers

3:57 angular PRO

In this lesson, we’re going to take a look at how adding the class provide to the providers property of a component to create an actual provider. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token.

angular tutorial about Understand Angular Dependency Injection

Understand Angular Dependency Injection

2:36 angular

To get started with Dependency Injection, we first want to understand what it is actually all about. In this lesson, we take a look at Dependency Injection as a software design pattern and clarify why it is so useful that Angular implements a system for it.

angular tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

angular tutorial about Load Data Based on Angular Route Params

Load Data Based on Angular Route Params

5:16 angular PRO

You can load resource based on the url using the a combination of ActivatedRoute and Angular’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

angular tutorial about Load Data to Build Angular Navigation

Load Data to Build Angular Navigation

3:29 angular PRO

Using the Http service, you can load in data to create your routerLink navgation. This builds on the same concepts of using *ngFor, but since Http uses streams, you’ll need to use the | async pipe to be able to properly display the loaded data.

angular tutorial about Build Dynamic Angular Navigation with ngFor

Build Dynamic Angular Navigation with ngFor

1:49 angular PRO

It’s often easier to build out your navigation dynamically so that you have programmatic control of which navigation elements appear (and those which don’t). You can leverage the power of Angular’s *ngFor directive to build out navigation based on any set of data you provide with urls.

angular tutorial about Understand the Angular Base href Requirement

Understand the Angular Base href Requirement

3:48 angular PRO

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

angular tutorial about Use Params from Angular Routes Inside of Components

Use Params from Angular Routes Inside of Components

3:07 angular PRO

Angular’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

angular tutorial about Style the Active Angular Navigation Element with routerLinkActive

Style the Active Angular Navigation Element with routerLinkActive

1:53 angular PRO

You can easily show the user which route they are on using Angular’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.

angular tutorial about Lazy Load Angular Modules with the Router

Lazy Load Angular Modules with the Router

5:15 angular PRO

Angular lazy loading is a core feature of Angular. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular’s module pattern so that files that belong to each module don’t get required by other modules.

angular tutorial about Build Angular Navigation with routerLink

Build Angular Navigation with routerLink

0:38 angular PRO

Angular navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular’s router to navigate between your defined routes.

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