Angular 2 Master Class with Alejandro Rangel

Get all the knowledge required and become an Angular 2 ninja. Build many applications following the live Master Class
4.7 (199 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.
4,128 students enrolled
50% off
Take This Course
  • Lectures 80
  • Length 9.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

Learn everything you need to become an Angular 2 expert!

In this Master Class you will learn all aspects of Angular 2 including ES6 and TypeScript. You will get three packages in one course!

You just need to know pure Javascript, CSS and HTML, I will teach you the rest needed for becoming a master in Angular 2. Additionally, You will be using several IDEs, so, at the end of the class you can decide which is the most suitable for you, specifically we will take a look on WebStorm, Visual Code Studio, Sublime Text and Plunkr.

This Master Class is a live session of more than 9.5 hours will lots of examples, exercises and professional tips that you won't get in any other documentation available today.

Every section is divided in a Theory lesson and a Practical Exercise. This will help you to understand complex topics like Dependency Injection, RxJS, Routing and at the same time code with me and get the most of every part of Angular 2.

Why is this Master Class so valuable?

  • 9.5+ hours of unique content. This is 15+ GB of videos
  • It resumes lots of materials and conferences available in Internet related to Angular 2. This will save you hundred of hours watching different sources
  • Professional tips from practical examples learnt from real experience
  • It offers Angular 2, TypeScript and ES6 in one full package!
  • This master class goes beyond the basics, you will build full applications that mix all concepts you need for programming real applications
  • Offers comparison between Angular 1 and 2 in the critical sections. This will help you for upgrading versions
  • Every section has a PDF, PPT and the source code. You can use this resources for practising after watching the course
  • I offer personal assistance at any time you need to solve an exercise. Lets Skype!

Why do I recorded this Master Class?

As a professional Frontend architect, I started working with Angular 2 since alpha version. I study all parts of the framework while Angular team has been releasing new versions. I decided to switch a full Angular 1/Ionic product to Angular 2 and since them my team has been working intensively with Components, Directives, Routing, Http, Services, Styling and more.

This Master Class is my resume of all possible resources that I have found and used with my team and I consider that this is the most valuable material that I can offer in Internet.

Continuous Updates of this course:

  • This Master Class will have updates every time that Angular 2 release new features
  • I will upload all live conferences I do related to Angular 2. This is a big plus, you will learn from the audience questions too

Why Angular 2?

One of the most popular open source JavaScript frameworks in the world of web application development is AngularJS. Since its release, it has received an exponential growth of adoption and support.

Announced at the ng-conference in October 2014, Angular 2.0 is the new version of Angular.

For those who thought that it will be just an update… sorry, it is not! Angular 2 is an entire new framework with breaking changes.

Faster than Angular 1, Angular 2 uses natural, easy-to-write syntax. It gives you the tools you need to build apps for desktop, mobile web, Android, and iOS.

What are you waiting for? Register now and enjoy the course!

What are the requirements?

  • You should be familiar with Html, CSS and Javascript in order to be able to follow this master class
  • You should download any of the following IDE: Visual Code Studio, Sublime Text or WebStorm. I will make examples with all of them, so, you can be familiar and choose the most suitable for you
  • It is a plus if you know Angular 1. I will be comparing both frameworks many times

What am I going to get from this course?

  • Full understanding of Angular 2
  • Master Angular Components, Directives, Pipes, Services, Routing, Http, Bootstrapping and many more details
  • Good techniques for coding with Angular 2
  • Code with examples
  • You will learn everything you need to work with Angular 2. I can guarantee that this Master Class will give you all the knowledge you need
  • Master TypeScript and ES6

Who is the target audience?

  • Angular 2 is for frontend developers that want to learn about the next version of Angular
  • This Master class is recorded in live, so, you should code with me, follow the examples, make mistakes and debug the code. This is the best way to learn new frameworks
  • You should take this Master Class if you really want to understand all areas of Angular 2. There is a dedicated section for every part of the framework

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Course Introduction
Section 2: ES6 - Javascript New features

You will learn about the ES6 new block scoping with the keywords: let and const


You will learn how to create Classes with ES6


You will learn about inheritance of classes in ES6


You will learn how to pass default parameters to functions in case none is provided


You will learn how to use Collections in ES6: Set and Map

Array Comprehension
Arrow Function or "Fat Arrow" =>
Section 3: TypeScript
Type System Part 1
Type System Part 2
Classes, Objects, Interfaces and Inheritance - Part 1
Classes, Objects, Interfaces and Inheritance - Part 2
Section 4: RxJS

You will learn about the library RxJS and why is so important for Angular 2


Code with me a Practical example using RxJS Observable. You will need when we use the library Angular 2 Http

Section 5: Angular 2 - Introduction
Introduction - Part 1
Introduction - Part 2
Section 6: Architecture

You will learn about the different areas of Angular 2:

  • Components
  • Directives
  • Services
  • Pipes
  • Forms
  • Routing

This section is just an introduction before getting into details of each area

Section 7: Angular 2 - Setup
Configuration and Bootstrapping
Section 8: Components

You will learn what are Components and how to use them

Code with me and learn how to create your first Component from scratch
Section 9: Display Data

You will learn the theory behind displaying data from the templates of your Angular 2 components


Code with me and learn how to display data to the user with a practical example

Section 10: User Input
You will learn the theory behind handling user events in Angular 2

Code with me and learn how to handle user events like mouseup and keypup

Section 11: Forms
Forms - Theory
Forms - Practical Exercise
Section 12: Services

You will learn the theory behind Services in Angular 2

Services - Practical exercise
Section 13: Dependency Injection

You will learn in the most simple way "What is Dependency Injection"


Code with me and learn how to inject Services in your Components

Section 14: Pipes

You will learn the theory behind Pipes in your Angular 2 templates


Code with me and learn how to create a Pipe for scratch

Section 15: Atribute Directive

You will understand the theory behind writing Attribute Directives for styling the Dom


Code with me and learn how to create your first Attribute Directive from scratch

Section 16: Structural Directive

You will learn the theory behind build-in and custom Structural Directives in Angular 2


Code with me and learn how to create your first Structural Directive

Section 17: Http

In this section you will learn how to use the Http library from Angular 2 and code an example making a Http GET request to an external api


Code with me and learn how to make an http GET request

Section 18: Routing

You will learn the theory behind the Angular 2 Router

Routing - Practical Exercise Part 1
Routing - Practical Exercise Part 2
Section 19: Full Angular 2 Weather App

In this section we will build a full application using the following concepts:

  • Setup an Angular 2 application from scratch
  • Components
  • Services
  • TypeScript models and Interfaces
  • Data and event binding
  • Debugging
  • Using a real Http api with RxJS
  • Styling components

You will learn how to setup an Angular 2 application from scratch. In order to do that, the first step is to create the package.json. We will get into the details of every line of the package.json and then code


You will learn how to setup Angular 2 for working with TypeScript. In order to transpile TypeScript to Javascript, we have to specify a tsconfig.json. We will get into the details of every line of the tsconfig.json and then code


You will code with me the first Component of the WeatherApp


You will learn how to setup Angular 2 for bootstrapping in the browser. This is a super important step in order to start the application. We will code together the boot.ts


You will learn to create the index.html required to load any Angular 2 application. You will learn about System.js


In this video you will learn and code for displaying data in the AppComponent o the WeatherApp. We will use interpolation


You will learn how to debug an Angular 2 application using the sourceMap property from the tsconfig.json


You will learn how to create a Data Model implementing an Interface. This is am important concept for proper structure of your Angular 2 code.


You will learn how to use Two-way data binding for getting the city from an user input


You will learn how to apply inline and external css to the AppComponent of the WeatherApp

Structural Directive: *ngIf and *ngFor

You will learn and code with me a Weather Service for returning the weather data to the AppComponent


You will learn how to use the Angular 2 Http library for getting real weather data from

Section 20: MyTunes

Full Angular 2 application for learning how a real production application looks like. You will learn:

  • Setup
  • Configuring TypeScript for a different output directory
  • Writing custom Attribute and Structural Directives
  • Components
  • Classes and Interfaces
  • Services
  • Connected the application with Firebase and API
  • Routing in depth
  • Styling
  • Tricks for a production ready application

Configuration of the application:

  • package.json
  • tsconfig.json
  • index.html
  • Modifying the System.js for loading javascript from a different folder

You will practise the Boostrapping process writing the main.ts


We will add external libraries:

  • Bootstrap
  • Font-awesome
  • Firebase

Explanation in detail about the folders structure in MyTunes


Analysis of the components needed in MyTunes and how to organise them in modules


Writing the components for MyTunes


Configure the RouteConfig in the AppComponent.ts


We will configure TypeScript for placing the Javascript files in a different folder


We introduce some common bugs in Mytunes. In this lesson we are going to fix them.


We will write all classes and interfaces needed in MyTunes


We are going to connect MyTunes with Firebase, using Angular 2 Http library and RxJS Observables


We will create a custom Pipe


We are going to create to custom directives:

  • Structural Directive: For looping in the Dom
  • Attribute Directive: For highlighting albums
Wiring Component, Services, Directives, Pipes and Models

We will add an extra CSS style for the Sticky footer


Lets run MyTunes and see the final product

Section 21: Goodbye

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alejandro Rangel, Mobile, Web Developer and Teacher

Hi! I'm Alejandro. I have a degree in Telecommunications Engineer from Universidad Politécnica de Cataluña. Software Development and teaching are my passions.

I have been working for 7+ years as a freelance and for companies as a Mobile and Frontend Software Developer. As a teacher, I love to share my Knowledge and experience with my students, so, they can have a full training about been and working as a software developer. Teaching makes me happy.

I am working hard for creating awesome courses in Udemy. Hope to see you in my classroom

Ready to start learning?
Take This Course