Browse all Angular 2 lessons.

showing All 187 lessons...

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

Map a Second Angular Route to a Component

P

Configure Your First Angular Route

Structure a Basic Angular 2 Application

P

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

P

Order Dynamic Components Inside an Angular 2 ViewContainer

P

Manipulate and Access DOM Elements with Angular 2 Renderer

P

Move and Delete Angular 2 Components After Creation

P

Set Values on Generated Angular 2 Templates with Template Context

P

Select From Multiple Nested Angular 2 Elements

P

Set Properties on Dynamically Created Angular 2 Components

P

Style Angular 2 Components

P

Generate Angular 2 Components Programmatically with entryComponents

P

Angular 2 Smart Components vs Presentation Components

P

Share a Service Across Angular 2 Components and Modules

P

Create Shareable Angular 2 Components

P

Create Application-Specific Angular 2 Components

P

Angular 2 - Building a Toggle Button Component

P

Using the Async Pipe in Angular 2

P

@ngrx/store in 10 minutes

P

Review of Angular 2, RxJS, and Reducers from ngrx/store

P

Use a Value from the Store in a Reducer

P

Use a Reducer to Change an Object's Property Inside an Array

P

Use Two Reducers Together

P

Add a Second Reducer to the Store

P

Pass Observables into Components with Async Pipe

P

Pass Template Input Values to Reducers

P

Dispatch Action Payloads to Reducers

P

Dispatch Action Types to Reducers

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

angular tutorial about Map a Second Angular Route to a Component

Map a Second Angular Route to a Component

0:49 angular PRO

Mapping Angular routes to components is fairly straight-forward, but if you’re not going to lazy load in modules, then you’ll need to make sure to reference each Component you’re using in your main App Module.

angular tutorial about Configure Your First Angular Route

Configure Your First Angular Route

3:31 angular

Using the Angular router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.

angular tutorial about Structure a Basic Angular 2 Application

Structure a Basic Angular 2 Application

1:16 angular PRO

Angular 2 projects are separated into many different files: main, modules, components, etc. This lesson shows you how to take the Hello World example of an Angular 2 app and split it across multiple files for proper organization.

angular tutorial about Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

2:21 angular PRO

You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content. This process is called reprojection, but you may be more familiar with the term “transclusion”.

angular tutorial about Order Dynamic Components Inside an Angular 2 ViewContainer

Order Dynamic Components Inside an Angular 2 ViewContainer

2:08 angular PRO

By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you want.

angular tutorial about Manipulate and Access DOM Elements with Angular 2 Renderer

Manipulate and Access DOM Elements with Angular 2 Renderer

3:46 angular PRO

The Angular 2 renderer allows you to safely use elements created in your template regardless of the platform you’re working on. It’s important to remember that your components could easily be used inside a ServiceWorker or other platform, so you should always rely on the renderer to keep your DOM access safe.

angular tutorial about Move and Delete Angular 2 Components After Creation

Move and Delete Angular 2 Components After Creation

2:25 angular PRO

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components.

angular tutorial about Set Values on Generated Angular 2 Templates with Template Context

Set Values on Generated Angular 2 Templates with Template Context

0:58 angular PRO

Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated.

angular tutorial about Select From Multiple Nested Angular 2 Elements

Select From Multiple Nested Angular 2 Elements

3:02 angular PRO

You have complete control over the elements you nest inside of your component instance by using selectors to access and rearrange them. Selecting allows you reconstruct the elements in whatever order you like so you can visual customize the content passed in.

angular tutorial about Set Properties on Dynamically Created Angular 2 Components

Set Properties on Dynamically Created Angular 2 Components

1:47 angular PRO

When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component class.

angular tutorial about Style Angular 2 Components

Style Angular 2 Components

3:43 angular PRO

Each Angular 2 Component can have its own styles which will remained contained inside the component. These isolated styles allow you to add whichever styles you want without worrying about them leaking out and affecting the rest of your application.

angular tutorial about Generate Angular 2 Components Programmatically with entryComponents

Generate Angular 2 Components Programmatically with entryComponents

4:12 angular PRO

You can generate Angular 2 components using a combination of ViewContainer and ComponentFactory, but you must always remember to add the components you want to generate to your list of entryComponents otherwise the compiler will optimize the component class out of your project.

angular tutorial about Angular 2 Smart Components vs Presentation Components

Angular 2 Smart Components vs Presentation Components

2:25 angular PRO

Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to lookup the entire service from the injector while Angular 2 Presentation components take the data from @Input defined on their component class.

angular tutorial about Share a Service Across Angular 2 Components and Modules

Share a Service Across Angular 2 Components and Modules

2:51 angular PRO

Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that your data is consistent and in sync.

angular tutorial about Create Shareable Angular 2 Components

Create Shareable Angular 2 Components

4:17 angular PRO

Components that you use across multiple applications need to follow a module pattern that keeps them separate from your application logic. This will allow you to make these Angular 2 components reusable and shareable and is the same pattern followed by many libraries that you may import into your projects.

angular tutorial about Create Application-Specific Angular 2 Components

Create Application-Specific Angular 2 Components

2:51 angular PRO

Many components you create will be specific to your application because they will rely on your application services. These application-specific components are often called “feature” components and they follow a module pattern which integrates them with your application.

angular tutorial about Angular 2 - Building a Toggle Button Component

Angular 2 - Building a Toggle Button Component

7:28 angular PRO

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

angular tutorial about Using the Async Pipe in Angular 2

Using the Async Pipe in Angular 2

5:27 angular PRO

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 demonstrates common use-cases within your applications!

angular tutorial about @ngrx/store in 10 minutes

@ngrx/store in 10 minutes

10:49 angular PRO

@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 in your Angular 2 applications. This lesson takes an existing Angular 2 app and refactors it to utilize @ngrx/store, touching on all of the major concepts along the way!

angular tutorial about Review of Angular 2, RxJS, and Reducers from ngrx/store

Review of Angular 2, RxJS, and Reducers from ngrx/store

3:38 angular PRO

This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.

angular tutorial about Use a Value from the Store in a Reducer

Use a Value from the Store in a Reducer

3:31 angular PRO

RxJS allows you to combine streams in various ways. This lesson shows you how to take a click stream and combine it with a store stream to use a value from the store inside a reducer.

angular tutorial about Use a Reducer to Change an Object's Property Inside an Array

Use a Reducer to Change an Object's Property Inside an Array

5:05 angular PRO

Reducers are also often used for changing a single property inside of other reducers. This lesson shows how a type can enter the people reducer, but then the people reducer can use a different type to call the clock reducer and get a value back.

angular tutorial about Use Two Reducers Together

Use Two Reducers Together

1:38 angular PRO

Reducers can easily be used inside one another to update related state. This lesson shows how you can use the clock reducer inside of the people reducer to create the time for each new person.

angular tutorial about Add a Second Reducer to the Store

Add a Second Reducer to the Store

2:33 angular PRO

Stores can accept as many reducers as you need. This lesson covers adding a second reducer that will be used to control an array of people.

angular tutorial about Pass Observables into Components with Async Pipe

Pass Observables into Components with Async Pipe

3:09 angular PRO

The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.

angular tutorial about Pass Template Input Values to Reducers

Pass Template Input Values to Reducers

2:37 angular PRO

Angular allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.

angular tutorial about Dispatch Action Payloads to Reducers

Dispatch Action Payloads to Reducers

2:00 angular PRO

While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. This lesson shows you how to pass an action payload along with your action type to update the state.

angular tutorial about Dispatch Action Types to Reducers

Dispatch Action Types to Reducers

1:21 angular PRO

A reducer needs to know what you want it to do whenever it's called. You do this by passing along an action type then the reducer can switch based on the type to achieve the logic you need. This lesson covers dispatching action types to your reducer to update the state based on that type.

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