Angular 2

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

COURSES 17

WATCH Brian Troncone's COURSE

Structure Angular Apps with Angular Material Components

Structure Angular Apps with Angular Material Components

In this course we will explore integral Angular Material components. We will start with components related to navigation, layou...

13 lessons

WATCH Juri Strumpflohner's COURSE

Create Dynamic Components in Angular

Create Dynamic Components in Angular

Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scal...

7 lessons

WATCH Juri Strumpflohner's COURSE

Create Dynamic Forms in Angular

Create Dynamic Forms in Angular

When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give u...

7 lessons

WATCH Juri Strumpflohner's COURSE

Learn HTTP in Angular

Learn HTTP in Angular

Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communi...

11 lessons

WATCH Juri Strumpflohner's COURSE

Understand How to Style Angular Components

Understand How to Style Angular Components

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating...

10 lessons

WATCH Mike Hartington's COURSE

Building apps with Ionic 2

Building apps with Ionic 2

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently framew...

12 lessons

WATCH John Lindquist's COURSE

Get Started with Angular

Get Started with Angular

Angular is basically a collection of Components brought together within modules. The many tools, such as the Angular CLI, allow...

13 lessons

WATCH John Lindquist's COURSE

Understand Angular Directives in Depth

Understand Angular Directives in Depth

Angular Directives allow you to add custom behavior to elements and components. Rather than creating a hierarchy of components ...

11 lessons

WATCH Nathan Walker's COURSE

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. In this cours...

12 lessons

WATCH John Lindquist's COURSE

Animate Angular Web Applications

Animate Angular Web Applications

Angular comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, s...

8 lessons

WATCH Nathan Walker's COURSE

Create Native Mobile Apps with NativeScript for Angular

Create Native Mobile Apps with NativeScript for Angular

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting s...

18 lessons

WATCH John Lindquist's COURSE

Building Angular Components

Building Angular Components

Angular has introduced many new concepts around how to construct components. There's new template syntax, a new event system, a...

16 lessons

WATCH Christoph Burgdorf's COURSE

Build an Angular Instant Search Component

Build an Angular Instant Search Component

In this course you will learn more about using observables in Angular. We are going to explore the new HTTP service, and how we...

6 lessons

WATCH John Lindquist's COURSE

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Build Redux Style Applications with Angular, RxJS, and ngrx/store

Angular has many built-in features for working closely with RxJS to help you build fully reactive applications. This course wil...

16 lessons

WATCH John Lindquist's COURSE

Learn the Basics of Angular Forms

Learn the Basics of Angular Forms

Angular makes creating forms a breeze with its new ngForm, ngModel, and ngModelGroup features. This course walks you through ho...

10 lessons

WATCH Pascal Precht's COURSE

Angular Dependency Injection (DI) Explained

Angular Dependency Injection (DI) Explained

This course will teach you the ins and outs of dependency injection in Angular. You will learn what dependency injection means,...

8 lessons

WATCH John Lindquist's COURSE

Manage UI State with the Angular Router

Manage UI State with the Angular Router

Angular's router comes with many features for routing based on path's and loading specific components. This course gives you an...

11 lessons

Share a lib in an Nx Workspace with a web and NativeScript app

In this lesson we will look at how to setup an Nx workspace to allow libs to be shared with a NativeScript app. Considerations for tsconfig, livereload and testing will be looked at.

Nathan Walker
6:01

Set up a NativeScript app in an Nx Workspace

Nx is an open source toolkit for enterprise Angular applications. The workspace offers many advantages to maximizing code reuse across many different applications in a monorepo setup. Learn how to...

Nathan Walker
1:30

Create a custom validator for reactive forms in Angular

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a...

Juri Strumpflohner
4:00

Create a custom validator for template driven forms in Angular

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a...

Juri Strumpflohner
6:43

Build and deploy your Angular app to Firebase Hosting

Firebase not only provides you a real-time, powerful database, but recently also added a hosting capability to its offers. In this lesson we will learn how to use the Firebase CLI to setup and conf...

Juri Strumpflohner
2:58

Setup automated deployment with Angular, Travis and Firebase

Automate all the things!! Automation is crucial for increasing the quality and productivity. In this lesson we will learn how to automate the deployment of our Angular app to Firebase Hosting, by u...

Juri Strumpflohner
7:48

Bind async requests in your Angular template with the async pipe and the "as" keyword

Angular allows us to conveniently use the async pipe to automatically register to RxJS observables and render the result into the template once the request succeeds. This has some drawbacks, especi...

Juri Strumpflohner
4:51

Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage ...

Juri Strumpflohner
2:07

Create iOS custom UIViewController components with NativeScript for Angular

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCEx...

Nathan Walker
10:00

Share Template Content In Another Template With Content Projection

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

Mike Brocchi
1:13

Generate components with the Angular CLI

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.

Mike Brocchi
1:21

Install the Angular CLI to Create and Serve an Angular Application

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

Mike Brocchi
1:17

Browse all Angular 2 lessons.

showing All 215 lessons...

Angular 2: Template Syntax

P

Angular 2 - Hello World (es6)

P

Angular 2 - Hello World (es5)

P

Angular 2 - Binding (es5)

P

Angular 2 - Events (es5)

P

Angular 2 - Custom Events (es5)

P

Angular 2 - First Directive (es5)

P

Event Binding with Angular 2 and TypeScript

P

Property Binding with Angular 2 and TypeScript

P

Say "Hello World" to Angular 2

Create a Simple Angular 2 Component

Manage Angular 2 Elements with Events and Refs

Control Angular 2 Events with $event and Event Handlers

Share Services and Data with Angular 2 Dependency Injection

Provide and Share Values with Angular 2 Dependency Injection

Loop Through Angular 2 Components with ngFor

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

Adding a data model

P

Template property syntax

P

Pass Values into Angular 2 Components with @Input

Write CSS Inside of Angular 2 Components

Use Global CSS Inside Angular 2 Components

Using Pipes to Filter Data

P

Using Array ...spread to enforce Pipe immutability.

P

Refactoring mutations to enforce immutable data in Angular 2

P

Build a select dropdown with *ngFor in Angular 2

P

Filter items with a custom search Pipe in Angular 2

P

Organizing Angular 2 projects by feature

P

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

P

WebStorm - Setting Up Angular 2

P

Render an Observable with the Async Pipe

Render an Observable Date with the Async and Date Pipes

P

Handle Click Events with Subjects

P

Handle Clicks and Intervals Together with Merge

P

Manage State in RxJS with StartWith and Scan

P

Map Streams to Values to Affect State

P

Use ngrx/store and Reducers for Angular Application State

P

Dispatch Action Types to Reducers

P

Dispatch Action Payloads to Reducers

P

Pass Template Input Values to Reducers

P

Pass Observables into Components with Async Pipe

P

Add a Second Reducer to the Store

P

Use Two Reducers Together

P

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

P

Use a Value from the Store in a Reducer

P

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

P

@ngrx/store in 10 minutes

P

Using the Async Pipe in Angular 2

P

Angular 2 - Building a Toggle Button Component

P

Create Application-Specific Angular 2 Components

P
angular tutorial about Angular 2: Template Syntax

Angular 2: Template Syntax

11:06 angular PRO

Curious about the new Angular 2 template syntax features? In this preview, John will take you on a tour.

angular tutorial about Angular 2 - Hello World (es6)

Angular 2 - Hello World (es6)

2:57 angular PRO

Getting started with Angular 2 involves a new focus on building out components. John walks through the process of bootstrapping your first component as well as how to include one component inside another.

angular tutorial about Angular 2 - Hello World (es5)

Angular 2 - Hello World (es5)

3:11 angular PRO

Angular 2 fully supports using es5 so you don't have to use TypeScript or any other transpiler to get started. John walks you through writing your first component in es5, bootstrapping it, then adding another Angular 2 component to the template.

angular tutorial about Angular 2 - Binding (es5)

Angular 2 - Binding (es5)

3:01 angular PRO

Binding in Angular 2 works much the same way as binding in Angular 1, but there are some very important differences. John covers the differences and improvements you can look forward to as you start building your own Angular 2 components.

angular tutorial about Angular 2 - Events (es5)

Angular 2 - Events (es5)

3:38 angular PRO

Angular 2 introduces a new event syntax for connecting events on the DOM to your controllers. In this video, John walks you through the basics of the new syntax and how to handle events inside your own components.

angular tutorial about Angular 2 - Custom Events (es5)

Angular 2 - Custom Events (es5)

4:54 angular PRO

Angular 2 components can emit custom events through the new EventEmitter. John walks through the process of setting up a custom event and how to interact between the parent and child components.

angular tutorial about Angular 2 - First Directive (es5)

Angular 2 - First Directive (es5)

2:24 angular PRO

Directives in Angular 2 are basically Components without templates. Directives allow you to interact with other components. In this video, we'll use Directive's hostListeners and Directives hostProperties to set up those relationships.

angular tutorial about Event Binding with Angular 2 and TypeScript

Event Binding with Angular 2 and TypeScript

2:49 angular PRO

We will learn about using Angular 2's new Event Binding syntax with TypeScript. Learn to bind to DOM events with your Angular 2 application.

angular tutorial about Property Binding with Angular 2 and TypeScript

Property Binding with Angular 2 and TypeScript

3:05 angular PRO

We will learn about using Angular 2's new Property Binding syntax with TypeScript. Learn to bind to DOM properties with your Angular 2 application.

angular tutorial about Say "Hello World" to Angular 2

Say "Hello World" to Angular 2

1:10 angular

The quickest way to get started with Angular 2 is to use the Angular CLI. The Angular CLI allows you to create new projects and startup a server in just a couple quick commands. This lesson shows how to install the cli, start the server, and make a simple change.

angular tutorial about Create a Simple Angular 2 Component

Create a Simple Angular 2 Component

2:10 angular

The simplest way to create a new component is again to use the Angular CLI. The Angular CLI can quickly generate components for you to use inside your modules and your templates. This lesson walks through using the Angular CLI to generate an Angular 2 Component then using that Component in your application.

angular tutorial about Manage Angular 2 Elements with Events and Refs

Manage Angular 2 Elements with Events and Refs

2:00 angular

Angular 2 provides powerful template syntax to access events and elements inside of your Component's class. This lesson shows how to access the click events off of a button and the values and element off of an input.

angular tutorial about Control Angular 2 Events with $event and Event Handlers

Control Angular 2 Events with $event and Event Handlers

1:01 angular

This lesson talks about the benefits of using the parens-based (click) syntax so that Angular 2 can handle any custom event. Then the video explains how to pass in the actually event object using the familiar $event syntax.

angular tutorial about Share Services and Data with Angular 2 Dependency Injection

Share Services and Data with Angular 2 Dependency Injection

1:22 angular

The Angular CLI generates Services using a simple command. After your Service is generated, you can easily provide and share it to the rest of your application using Angular 2's Dependency Injection. This lesson walks through creating a Service with the Angular CLI then providing it to your application module.

angular tutorial about Provide and Share Values with Angular 2 Dependency Injection

Provide and Share Values with Angular 2 Dependency Injection

1:50 angular

TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the @Inject decorator. The @Inject decorator also allows you to provide any value or object that you need to share throughout your application without having to create a service.

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.

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

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.

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.

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.

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

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

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

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

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