Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Angular 2 - The Complete Guide to your Wishlist.

Add to Wishlist

Angular 2 - The Complete Guide

Master Angular and build awesome, reactive web apps with the successor of Angular.js
4.6 (8,439 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
35,444 students enrolled
Last updated 2/2017
English English
$10 $190 95% off
17 hours left at this price!
30-Day Money-Back Guarantee
  • 16 hours on-demand video
  • 26 Articles
  • 93 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Develop modern, complex, responsive and scalable web applications with Angular.js 2
Fully understand the architecture behind an Angular 2 application and how to use it
Use their gained, deep understanding of the Angular 2 fundamentals to quickly establish themselves as frontend developers
Create single-page applications with on of the most modern JavaScript frameworks out there
View Curriculum
  • Basic HTML and CSS knowledge helps, but isn't a must-have
  • Prior JavaScript and TypeScript knowledge also helps but isn't necessary to benefit from this course

This course will also be updated to Angular 4 (don't be confused - simply the latest version of Angular 2, not a complete re-write) once it's out!

Join the most comprehensive and popular Angular 2 course on Udemy, because now is the time to get started! 

From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular 2 App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular 2 CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

With Angular 2 being in release candidate phase and almost released, now is the time to jump in and take the advantage of being amongst the first to fully use the power and capabilities Angular 2 offers! Learn all the fundamentals you need to know to get started developing Angular 2 applications right away.

This course will be kept up-to-date to ensure you don't miss out on any changes once Angular 2 is finally released!

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular 2 team and the language you'll mostly see in Angular 2 tutorials. It's a superset to JavaScript and makes writing Angular 2 apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular 2 apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular 2?

Angular 2 is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular 2 allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 2 is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular 2 you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular 2.

Get a very deep understanding of how to create Angular 2 applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular 2 offers and how to apply them correctly.

Specifically you will learn:

    • Which architecture Angular 2 uses
    • How to use TypeScript to write Angular 2 applications
    • All about directives and components, including the creation of custom directives/ components
    • How databinding works
    • All about routing and handling navigation
    • What Pipes are and how to use them
    • How to access the Web (e.g. RESTful servers)
    • What dependency injection is and how to use it
    • How to use Modules in Angular 2
    • How to optimize your (bigger) Angular 2 Application
    • We will build a major project in this course
    • and much more!

Pay once, benefit a lifetime!

This is an evolving course! Angular 2 currently is in beta and this course will therefore be expanded and reflect futures currently not fully implemented or documented. You won’t lose out on anything!

Don’t lose any time, gain an edge and start developing now!

Who is the target audience?
  • Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
  • This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework
  • Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular 2
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 260 Lectures Collapse All 260 Lectures 16:25:49
Getting Started
9 Lectures 27:50

Let me introduce myself as well as this course.

Preview 01:49

The most important question first: What is Angular 2? This lecture will give you an overview what Angular 2 actually is, why you would use it and what its advantages are.

Preview 05:23

Problems with the CLI?

Time to get started, let's create an Angular 2 project and our first app!

Preview 03:50

Don't want to use the CLI or got problems with it? Try this project.

Got Setup Issues (with Angular 2 CLI)?

It's nice to have an automatically-created application, but it would be nicer if we could also change something in the code. Well, let's do that then.

Preview 04:05

What did the CLI actually create there? This lecture explores our project structure.

Understanding the Project Structure

This course uses TypeScript. Why? What are its advantages? Learn more in this lecture!

Why TypeScript? What is TypeScript?

Never saw TypeScript before? Let me guide you through the code you saw thus far.

Understanding the TypeScript Code
Components, Templates & Databinding
24 Lectures 01:43:21

Let's explore what Components actually are and how they work.

Preview 06:29

How does an Angular 2 app actually get loaded/ started? Let's find out in this video!

Preview 05:10

What are AppModules? What does the AppModule do? Let's learn more, in this lecture.

Preview 03:00

We got some options when it comes to using Templates and Styles. Let's see which options that are.

Using Templates & Styles

That was a lot - time for a first summary about Components and how the App starts!

First Summary

One Component is okay, but two is certainly better. Time to learn how to add a new Component to the Party!

Creating a new Component

Why do I name the Selectors the way I do name them? Because they should be unique! Why? Have a look at this lecture!

About Unique Selectors

Let's add another Component and see how all our components can work together.

Using multiple Components

This is a must watch! There are some slight changes since I recorded the videos. It's not hard to adjust - but you need to watch this video to learn what you need to do!

MUST WATCH: How to proceed with this Course

Remember the lecture about Styling? I mentioned that Styles are only applied to the Component for which the Styles are defined. How does Angular 2 do this? It's View Encapsulation what you're seeing here! What's that? Learn more in this video.

View Encapsulation & Styling

Components can not only display static content. Indeed they have many ways to render dynamic content. This lecture teaches one way how to display content passed to a Component.

Inserting Content with ng-content

Components, Components, Components... Cool to see all that in Action, but you certainly want to make them a bit more dynamic and flexible, right? Databinding to the rescue! Databinding allows you to let your Template/ View with your Code/ Component Body as well as with other parts of your App.

Databinding Overview

Databinding #1: String Interpolation. String Interpolation allows you to output text content in your template. You'll use that very often. Learn how it works here.

String Interpolation

Databinding #2 & #3: Property Binding & Event Binding. Property Binding & Event Binding allow you to pass data/ fetch data to/ from HTML Elements (DOM Properties & Events) as well as Directives and Components. Learn more about it in this lecture.

Property Binding & Event Binding Overview

Property Binding allows you to pass data INTO something (DOM Properties => HTML Elements, Directives, Components). That's something you'll often use, learn how to implement it in this lecture.

Property Binding

Let's set up our own Property Binding on our own Component!

Binding to Custom Properties

Event Binding kind of is the opposite of Property Binding. It's all about getting Data OUT of something (DOM Events, Directives & Components). Learn more in this lecture.

Event Binding

Time to create our own Event Binding with our own, custom Event.

Binding to Custom Events

There are things to add about Property & Event Binding. This lecture covers those extra information pieces.

More Information on Property & Event Binding

ngModel and AppModules

Databinding #4: Two-Way Databinding made Angular 1 popular. Angular 2 doesn't use it by default. WHAT??? No problem as you'll learn in this lecture. And you can still use it. Learn that, too, in this lecture.

Two-Way Binding

Components have a Lifecycle which Angular 2 runs through. Learn more about it in this lecture.

The Component Lifecycle

Lifecycle theory is great, seeing it in action is even better though. This lecture takes care about this!

Component Lifecycle Usage Examples

How can you work with your HTML Elements in your templates? This lecture explains which easy & quick possibilities of referencing and accessing them Angular 2 offers you.

Template Access with Local References, ViewChild and ContentChild
Course Project - Components & Databinding
7 Lectures 38:21

Let's start working on our course project in this lecture!

Project Setup

Definitely watch this lecture to learn more about required changes.

IMPORTANT: Required Changes

Let's create the first Component (besides the Root Component) => The Header.

Course Project: Creating the Header Component

Only seeing a Header isn't that awesome. Let's add another Component to the Party!

Course Project: Creating the Recipes Component

The App is taking Shape, but now we're making a big jump and add a couple of other important parts to it!

Course Project: Creating Recipe Model & List Component

Time to make everything a bit less static and use Databinding to work with Data in our App.

Course Project: Recipe Detail & Databinding

To finish the first part of the Course Project, we'll add another Component to it.

Course Project: Shopping List Component
13 Lectures 52:44

Components are important. But Angular 2 is not only about Components. And Components are Directives, remember that? What are Directives then? And are there Directives which aren't Components (Answer: Yes!). Learn more about it in this lecture.

Preview 04:35

Example Time! See some built-in Attribute Directives in Action to understand how they work and what they do!

Preview 04:45

READ FIRST: Angular 2 Router Version & Changes

Built-in Directives are cool, custom Directives are awesome! Learn how to build your own Attribute Directive here. This also shows you how Directives work under the hood.

Building a Custom Attribute Directive

How do Directives interact with the HTML Elements to which they are applied? Learn it in this lecture!

Element Interaction with HostListener & HostBinding

You may also pass the Event Object when using HostListeners. This Article explains how to do this.

HostListener: Passing Data

Directives may use Property Binding as well. Learn how to set it up and use it in this lecture.

Directive Property Binding

Structural Directive Time! Learn how to use the built-in ngIf Directive.


Structural Directive Time! Learn how to use the built-in ngFor Directive.


Structural Directive Time! Learn how to use the built-in ngSwitch Directive.


What does the "*" mean in front of all those Structural Directives? This lecture explains what Angular 2 does behind the scenes.

Angular 2's De-Sugaring Mechanism

Can we build our own Structural Directives? Yes! This lectures explains how to do that and what happens under the hood.

Building a Custom Structural Directive

Using NgModules
Course Project - Directives
2 Lectures 11:37

Let's practice all that Directive stuff in our course project. First, we'll use ngFor to output the ingredients of our recipes.

Course Project: Ingredients List with *ngFor

I think a Custom Directive would also fit in great! Let's build a Dropdown Directive.

Course Project - Custom Dropdown Directive
Debugging an Angular 2 Application
4 Lectures 06:16

A brief introduction to this module


The Chrome Developer Tools offer great Debugging support. This lecture shows how to use the Chrome Debugger with TypeScript code.

Chrome Debugger & Sourcemaps

If you don't find the TypeScript Sourcemaps

Augury is a Chrome Extension which helps you with Debugging Angular 2 Applications. Let's have a look at it in this video.

Services & Dependency Injection
8 Lectures 33:22

Components & Directives are important. But until now it's sometimes difficult to connect everything. Also, you might have duplicate code. If only there was a place to centralize certain tasks...

Oh...there is! Learn what Services are and how they work!

What are Services?

Time to see Services in Action, let's build a little Logging Service.

Example: Logging Service

We have Service. How do we use it? We need to inject into the places where we want to use it. What's Dependency Injection? This lecture helps you!

What is Dependency Injection?

Let's inject our Logging Service from one of the last lectures.

Example: Injecting the Logging Service

Dependency Injection is really powerful. Learn how you may use it to control the instance it creates for you.

Multiple Instances vs One Instance

Learn how to set up Application-wide service instances with AppModules.

Services & AppModules

Sometimes you also need a Service inside a Service. That's of course possible, too. Learn how to inject a Service into a Service here.

Injecting Services into Services

Services may also be used to let Components communicate efficiently with each other. Learn more about that in this lecture.

Using Services for Cross-Component Interaction
Course Project - Services & Dependency Injection
4 Lectures 16:34

Project Time again! Time to add some Services to it. A Service to manage our Recipes for example.

Course Project: Creating the Recipe Service

Or let's also add a Service for our Shopping List.

Course Project: Creating the Shopping List Service

As explained in the Service Module, Services are also great for Cross-Component Communication. Let's take advantage of that here!

Course Project: Cross-Service Communication

There are some things which can be cleaned up/ improved in our project. Or some missing parts. This lecture takes care about these things.

Course Project: Cleanup
21 Lectures 01:24:48

What is the Angular 2 Router, what does it do and why do we need it? This lecture should help you with these questions.

Introduction to the Angular 2 Router

This module explains how to create Routes in an Angular 2 application.

Setting up Routes

Time to load our components - otherwise our Routes don't do that much, do they?

Loading Components

Navigation with Links

There are a couple of options when it comes to creating Navigation Paths. Learn more about them, in this lecture.

Understanding Navigation Paths

Sometimes you don't want a clickable link, but instead trigger a Navigation Action in your Code. Learn more about your possibilities regarding this, in this lecture.

Imperative Routing (Triggered in Code)

A lot of routes also pass some data to the target component. This lecture explores how to setup Route Parameters.

Route Parameters

Passing Parameters is nice, but you also want to extract them, right? Learn more about your possibilities, in this lecture.

Extracting Route Parameters

Sometimes you only optionally pass some data. That is typically done through Query Parameters. You may learn more about them and how to use them in your routing, in this lecture.

Query Parameters

With the latest Router version (rc1), the way you access QueryParams changed. Though the old approach still works for now. Check out this article to learn more.

Query Params Changes in latest Router Version

Passing them is nice - but how to use them? This lecture explores this question.

Extracting Query Params

You learned how to pass Query Parameters using Imperative Navigation. But how do you do it using Links (routerLink)? This lecture should help you.

Query Parameters and the routerLink Directive

Fragments are another (possible) part of your URL. This lecture shows you how to pass Fragments and also how you can ensure your active Query Params and Fragments to persist upon a URL change.

Passing Fragments and Preserving Query Params/ Fragments

You want to use a Fragment in your Code? This article quickly explains how to extract it.

Extracting Fragments in Code

We got Routing. That's great! But sometimes you want to use some nested Routes. This lecture shows you how to do that.

Child Routes

You may also redirect certain requests to other routes. Learn more about it, in this lecture.

Redirecting Request

Showing the user where he currently is in your application is very important. Therefore, Angular 2 helps you with that by allowing you to place your own CSS classes on currently active Route Links.

Styling Active Route Links

There's one adjustment you need to make, to use Guards with AppModules. Let's see which one that is.

Using Guards with AppModules

Guards help you to control Route Access. This lecture teaches you how to control who's allowed to access a Route / Component, using the CanActivate Guard.

Guards: CanActivate

Guards help you to control Route Access. This lecture teaches you how to control who's allowed to leave a Route / Component, using the CanDeactivate Guard.

Guards: CanDeactivate

Learn more about available Location Strategies

Location Strategies
Course Project - Routing
9 Lectures 34:16

Let me quickly introduce you to this section.


Time to set up the Main Routes of our Recipe Book - "Main Page", "Recipes" and "Shopping List".

Setting up the Main Routes

What's the best Router with awesome Routes without any Links? Not worth that much, so let's add some links to this application.

Adding Links to Navigate

The Recipe Section offers a lot of possible actions like Editing or Viewing a Recipe. All of that can be controlled via Routing, so let's add some Child Routes!

Using Child Routes in the Recipe Section

With Child Routes in place, it's now time to also add some ways to get there!

Navigating between Child Routes

Since we use Routing, we want to pass Data as Route Params. Let's learn more about that and especially about extracting the Data, in this lecture.

Extracting Recipe Data from Route Params

Not much to say, time to clearly indicate which Recipe was selected.

Styling the Active Recipe

The "Edit" and "Delete" Buttons are still not working, so let's change that in this lecture.

Wiring "Edit" and "Delete" up

Time to polish the application!

Finishing Touches and some Cleanup
15 More Sections
About the Instructor
4.7 Average rating
15,790 Reviews
53,704 Students
9 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular 2 or VueJS 2 in a lot of projects. I love both world nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Report Abuse