Browse all Angular 2 lessons.

showing All 183 lessons...

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

Use ngrx/store and Reducers for Angular Application State

P

Map Streams to Values to Affect State

P

Manage State in RxJS with StartWith and Scan

P

Handle Clicks and Intervals Together with Merge

P
angular2 tutorial about Consuming events as Observables in Angular 2

Consuming events as Observables in Angular 2

3:07 angular2

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.

angular2 tutorial about Understand Angular @Injectable

Understand Angular @Injectable

4:27 angular2 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.

angular2 tutorial about Understand OpaqueToken in Angular

Understand OpaqueToken in Angular

3:53 angular2 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.

angular2 tutorial about Use Angular Value Providers

Use Angular Value Providers

3:00 angular2 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.

angular2 tutorial about Use Angular Factory Providers

Use Angular Factory Providers

3:29 angular2 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.

angular2 tutorial about Use Angular Factory Providers with dependencies

Use Angular Factory Providers with dependencies

3:00 angular2 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.

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

Inject an Angular Service into a Component using Providers

3:07 angular2

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.

angular2 tutorial about Use Provide and UseClass in Angular Providers

Use Provide and UseClass in Angular Providers

3:57 angular2 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.

angular2 tutorial about Understand Angular Dependency Injection

Understand Angular Dependency Injection

2:36 angular2

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.

angular2 tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular2

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.

angular2 tutorial about Load Data Based on Angular Route Params

Load Data Based on Angular Route Params

5:16 angular2 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.

angular2 tutorial about Load Data to Build Angular Navigation

Load Data to Build Angular Navigation

3:29 angular2 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.

angular2 tutorial about Build Dynamic Angular Navigation with ngFor

Build Dynamic Angular Navigation with ngFor

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

angular2 tutorial about Understand the Angular Base href Requirement

Understand the Angular Base href Requirement

3:48 angular2 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.

angular2 tutorial about Use Params from Angular Routes Inside of Components

Use Params from Angular Routes Inside of Components

3:07 angular2 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.

angular2 tutorial about Style the Active Angular Navigation Element with routerLinkActive

Style the Active Angular Navigation Element with routerLinkActive

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

angular2 tutorial about Lazy Load Angular Modules with the Router

Lazy Load Angular Modules with the Router

5:15 angular2 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.

angular2 tutorial about Build Angular Navigation with routerLink

Build Angular Navigation with routerLink

0:38 angular2 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.

angular2 tutorial about Map a Second Angular Route to a Component

Map a Second Angular Route to a Component

0:49 angular2 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.

angular2 tutorial about Configure Your First Angular Route

Configure Your First Angular Route

3:31 angular2

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.

angular2 tutorial about Structure a Basic Angular 2 Application

Structure a Basic Angular 2 Application

1:16 angular2 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.

angular2 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 angular2 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”.

angular2 tutorial about Order Dynamic Components Inside an Angular 2 ViewContainer

Order Dynamic Components Inside an Angular 2 ViewContainer

2:08 angular2 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.

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

Manipulate and Access DOM Elements with Angular 2 Renderer

3:46 angular2 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.

angular2 tutorial about Move and Delete Angular 2 Components After Creation

Move and Delete Angular 2 Components After Creation

2:25 angular2 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.

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

Set Values on Generated Angular 2 Templates with Template Context

0:58 angular2 PRO

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

angular2 tutorial about Select From Multiple Nested Angular 2 Elements

Select From Multiple Nested Angular 2 Elements

3:02 angular2 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.

angular2 tutorial about Set Properties on Dynamically Created Angular 2 Components

Set Properties on Dynamically Created Angular 2 Components

1:47 angular2 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.

angular2 tutorial about Style Angular 2 Components

Style Angular 2 Components

3:43 angular2 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.

angular2 tutorial about Generate Angular 2 Components Programmatically with entryComponents

Generate Angular 2 Components Programmatically with entryComponents

4:12 angular2 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.

angular2 tutorial about Angular 2 Smart Components vs Presentation Components

Angular 2 Smart Components vs Presentation Components

2:25 angular2 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.

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

Share a Service Across Angular 2 Components and Modules

2:51 angular2 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.

angular2 tutorial about Create Shareable Angular 2 Components

Create Shareable Angular 2 Components

4:17 angular2 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.

angular2 tutorial about Create Application-Specific Angular 2 Components

Create Application-Specific Angular 2 Components

2:51 angular2 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.

angular2 tutorial about Angular 2 - Building a Toggle Button Component

Angular 2 - Building a Toggle Button Component

7:28 angular2 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.

angular2 tutorial about Using the Async Pipe in Angular 2

Using the Async Pipe in Angular 2

5:27 angular2 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!

angular2 tutorial about @ngrx/store in 10 minutes

@ngrx/store in 10 minutes

10:49 angular2 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!

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

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

3:38 angular2 PRO

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

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

Use a Value from the Store in a Reducer

3:31 angular2 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.

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

angular2 tutorial about Use Two Reducers Together

Use Two Reducers Together

1:38 angular2 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.

angular2 tutorial about Add a Second Reducer to the Store

Add a Second Reducer to the Store

2:33 angular2 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.

angular2 tutorial about Pass Observables into Components with Async Pipe

Pass Observables into Components with Async Pipe

3:09 angular2 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.

angular2 tutorial about Pass Template Input Values to Reducers

Pass Template Input Values to Reducers

2:37 angular2 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.

angular2 tutorial about Dispatch Action Payloads to Reducers

Dispatch Action Payloads to Reducers

2:00 angular2 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.

angular2 tutorial about Dispatch Action Types to Reducers

Dispatch Action Types to Reducers

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

angular2 tutorial about Use ngrx/store and Reducers for Angular Application State

Use ngrx/store and Reducers for Angular Application State

5:12 angular2 PRO

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

angular2 tutorial about Map Streams to Values to Affect State

Map Streams to Values to Affect State

1:32 angular2 PRO

While you have multiple streams flowing into your scan operator, you'll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

angular2 tutorial about Manage State in RxJS with StartWith and Scan

Manage State in RxJS with StartWith and Scan

2:23 angular2 PRO

The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves just as a reduce function would, but scan is able to collect values from streams over time. This lesson covers using startWith to set the initial accumulator value then using scan to update the value of the clock from the clicks and interval.

angular2 tutorial about Handle Clicks and Intervals Together with Merge

Handle Clicks and Intervals Together with Merge

1:36 angular2 PRO

Observable.merge allows you take two different source streams and use either one of them to make changes to the same state of your data. This lesson shows how you can use a stream of clicks and an interval stream and use either one to update the clock.

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