Browse all Angular 2 lessons.

showing All 215 lessons...

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

Handle Click Events with Subjects

P

Render an Observable Date with the Async and Date Pipes

P

Render an Observable with the Async Pipe

WebStorm - Setting Up Angular 2

P

Overview of Angular 2 and what to learn next...

P

Organizing Angular 2 projects by feature

P

Filter items with a custom search Pipe in Angular 2

P

Build a select dropdown with *ngFor in Angular 2

P

Refactoring mutations to enforce immutable data in Angular 2

P

Using Array ...spread to enforce Pipe immutability.

P

Using Pipes to Filter Data

P

Use Global CSS Inside Angular 2 Components

Write CSS Inside of Angular 2 Components

Pass Values into Angular 2 Components with @Input

Template property syntax

P

Adding a data model

P

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

Loop Through Angular 2 Components with ngFor

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!

redux tutorial about @ngrx/store in 10 minutes

@ngrx/store in 10 minutes

10:49 redux 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.

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

Use ngrx/store and Reducers for Angular Application State

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

angular tutorial about Map Streams to Values to Affect State

Map Streams to Values to Affect State

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

angular tutorial about Manage State in RxJS with StartWith and Scan

Manage State in RxJS with StartWith and Scan

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

angular tutorial about Handle Clicks and Intervals Together with Merge

Handle Clicks and Intervals Together with Merge

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

angular tutorial about Handle Click Events with Subjects

Handle Click Events with Subjects

1:33 angular PRO

While Angular usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular and RxJS combined is to use Subjects and push the value through each event so that you can use it as part of your stream.

angular tutorial about Render an Observable Date with the Async and  Date Pipes

Render an Observable Date with the Async and Date Pipes

1:05 angular PRO

Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual Dates. We'll still use the Async pipe, but we'll also add on the Date pipe with some formatting to display the Date just the way we want it.

angular tutorial about Render an Observable with the Async Pipe

Render an Observable with the Async Pipe

2:19 angular

Angular templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

webstorm tutorial about WebStorm - Setting Up Angular 2

WebStorm - Setting Up Angular 2

1:52 webstorm PRO

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

angular tutorial about Overview of Angular 2 and what to learn next...

Overview of Angular 2 and what to learn next...

4:33 angular PRO

This lesson recaps how all of the pieces of Angular 2 fit together. It ends with encouraging you to learn the latest JavaScript features as Angular 2 will make heavy use of the latest JavaScript language features and patterns.

angular tutorial about Organizing Angular 2 projects by feature

Organizing Angular 2 projects by feature

2:23 angular PRO

This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.

angular tutorial about Filter items with a custom search Pipe in Angular 2

Filter items with a custom search Pipe in Angular 2

3:15 angular PRO

This lessons implements the Search Pipe with a new SearchBox component so you can search through each todo. It also demonstrates the patterns used for components to interact with each other. Often generic components are used for handling user input then they forward on those events (using Outputs) to components more specific to your application.

angular tutorial about Build a select dropdown with *ngFor in Angular 2

Build a select dropdown with *ngFor in Angular 2

4:21 angular PRO

This lesson walks you through building a component using ngFor on a select dropdown with options to pass in a param into the Pipe.

angular tutorial about Refactoring mutations to enforce immutable data in Angular 2

Refactoring mutations to enforce immutable data in Angular 2

4:16 angular PRO

When a Todo property updates, you still must create a new Array of Todos and assign a new reference. This lesson walks you through refactoring from the current approach to the immutable approach.

javascript tutorial about Using Array ...spread to enforce Pipe immutability.

Using Array ...spread to enforce Pipe immutability.

1:54 javascript PRO

Pipes need a new reference or else they will not update their output. In this lesson you will use the Array ...spread operator to create new Array to update pipe output without mutation.

javascript tutorial about Using Pipes to Filter Data

Using Pipes to Filter Data

2:24 javascript PRO

Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as giving it a name and a transform function that output what you expect.

angular tutorial about Use Global CSS Inside Angular 2 Components

Use Global CSS Inside Angular 2 Components

1:46 angular

Global CSS and stylesheets are also available to Angular 2 Components even though the styles you define inline will remain isolated to the Component itself. You can customize this behavior using ViewEncapsulation if you need to keep global styles out of your Components.

angular tutorial about Write CSS Inside of Angular 2 Components

Write CSS Inside of Angular 2 Components

2:57 angular

Many Components require different styles based on a set of conditions. Angular 2 helps you style your Components by allows you to define CSS and styles inline, then choosing which styles to use based on the current values in your Controller.

angular tutorial about Pass Values into Angular 2 Components with @Input

Pass Values into Angular 2 Components with @Input

1:59 angular

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components and have them display different values for each instance of the renderer.

angular tutorial about Template property syntax

Template property syntax

1:39 angular PRO

This lesson covers using the [input] syntax to change an element property such as “hidden” or “content-editable”. Using properties eliminates the need for Angular 1’s old directives such as ng-show and ng-hide as you’re now able to directly access any property on your element.

angular tutorial about Adding a data model

Adding a data model

2:19 angular PRO

This video covers migrating from simple strings to more complex objects inside of our Service to enable more features later on.

angular tutorial about Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

Sync Values from Inputs with Angular 2’s ngModel Two-Way Binding

1:43 angular

Two-way binding still exists in Angular 2 and ngModel makes it simple. The syntax is a combination of the [input] and (output) syntax to represent that the data is being pushed out and pulled in.

angular tutorial about Loop Through Angular 2 Components with ngFor

Loop Through Angular 2 Components with ngFor

1:58 angular

This lesson covers Angular 2’s version of looping through data in your templates: *ngFor. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop.

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