Angular 2+ with Typescript - Essential Training
4.4 (1,727 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
57,747 students enrolled

Angular 2+ with Typescript - Essential Training

Learn Angular 2 (or 4) from the ground up | This course combines a Project, Slides and Quizzes | Perfect for beginners
4.4 (1,727 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
57,747 students enrolled
Created by Patrick Schroeder
Last updated 12/2017
Current price: $126.99 Original price: $194.99 Discount: 35% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 27 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the Fundamental Concepts of Angular 2
  • Develop Angular 2+ Applications using Best Practices
  • Learn and Use TypeScript
  • Understand Modules, Components, Routing and Services
  • Understand HTTP and Observables
  • Know how to pass Data between components using Input and Output
Course content
Expand all 66 lectures 03:00:10
+ Introduction
1 lecture 01:45

What you should know and what to expect.

Repo is located here:

Download the slides here:

Preview 01:45
+ Getting Started
5 lectures 11:19

Hello and welcome to the getting started section of this course.

Repo is located here:

Download the slides here:

Intro to Getting Started

So what exactly is Angular? AngularJS is a leading framework for building javascript heavy single-page web applications.

Repo for this course:

Preview 03:26

Angular 2 was conceived as a complete rewrite to Angular 1 in order to fulfill the expectations of modern developers who demand blazing speed and responsiveness from their web applications.

Preview 01:56

Which language to use? Angular 2 provides a variety of options when choosing a language to code in. We can use ES5 which is the current version of javascript, Dart, CoffeeScript, either of the newer versions of javascript known as ES2015 and a future version of javascript known as ES7 or Typescript, which is the preferred language.

Language Options

Now that we’ve made the decision to code using the Typescript language, lets take a brief look at some of the core language characteristics as it relates to Angular 2.

Preview 03:55
Section 2 Quiz
5 questions
+ Angular 2 Setup
4 lectures 07:39

In this section, we’ll look at the different developer environment options and set up our first Angular app.

Intro to Setup

In this lecture, we discuss operating systems, installing Node.js and choosing an editor.

Developer Environment

Getting setup with our starting code. 

Starter Files Setup

Understand the concept of modules.

Hint: Module = File

Understanding Modules
Section 3 Quiz
4 questions
+ NgModules
3 lectures 06:11

Introduction to section.

NgModules Introduction

The Angular docs tell us that NgModules are used in order to help us organize our application into cohesive blocks of functionality. So lets explore exactly what they mean by that.

NgModules Explained

In this video you’ll learn how we bootstrap our application which is the process of putting together the minimal pieces needed to run an Angular application.

Bootstrapping Our App
Section 4 Quiz
2 questions
+ Components
7 lectures 19:28

Components are at the heart of Angular 2. In this section we’ll discuss how to create and use components to encapsulate functionality.

Components Intro

Components are the foundation of modular development and are brand new in Angular 2.

Preview 01:35

To get you familiar using components, lets reconstruct our AppComponent making a few changes.

App Component Explored

In this video we discuss what comprises a component and how we should be structuring our components.

Preview 03:05

Lets now go through the process of creating a new nested component to act as a directive as well as walk through how to use a templateUrl and styles within our component.

Components as Directives

Discussion of how to hide our Javascript files from appearing in the editor.

Hiding Our Javascript Files

In this video we’re going to update our app so that it starts to look more like our sample application.

Preview 04:36
+ Data Binding
7 lectures 14:41

Data binding is the mechanism we use for communicating between the template and the component class.

Data Binding Intro

The fist type of data binding we’ll discuss is that of 1-way binding. One way binding is handled using either interpolation or property binding.

One-Way Data Binding

In this video we’re going to make our books-list component the main page of our application. Then we’ll add in some new data in order to demonstrate data-binding.

One-Way Binding in Our App

The next type of binding we need to talk about is that of 2-way binding. When using 2-way binding our view is bound to our model.

2-Way Data Binding

Add 2-way binding to our search field.

2-Way Binding in Our App

Event binding is used to respond to user actions.

Event Binding

Back in our app we’re going to create event binding to toggle between showing or hiding one of our images.

Event Binding in Our App
+ Directives
5 lectures 13:58

You can think of a Directive in Angular as an HTML element or attribute that is used to extend and enhance our HTML.

Directives Intro

This video will cover component and attribute directives.

Attributes Directive

We use the NgIf directive when we want to add, remove or update view elements.


The NgFor directive instantiates a template once per item from an iterable.


The ngClass directive adds and removes CSS classes on an HTML element.

+ Pipes
3 lectures 09:34

Pipes allow us to transform or format our data. In this way we can take data given to us by an API or database and make it more appropriate for our needs inside of our application.

Pipes Intro

Angular provides us with some built-in pipes that we can easily use inside of our templates. These include: uppercase, lowercase, decimal, currency, date and JSON.

Built-in Pipes

In this video we’re going to see how you can go about creating your own custom pipe. We'll first walk through the process in our slides and then build a Truncate Pipe to limit the amount of characters displayed in a description.

Custom Pipes
+ Interface
4 lectures 08:11

In this section we’re going to be talking about Interfaces in Typescript. We’ll start off with a definition of what interfaces are and explore why they are used.

Interface Intro

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Interface Explained

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Using Interfaces

Lets now create and export a Book interface.

Interface Example in Our App
+ Lifecycle Hooks
3 lectures 06:38

In this section we’re going to be discussing how to use component lifecycle hooks.

Lifecycle Hooks Intro

Angular defines lifecycle hooks as a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Lifecycle Hooks Explained

Lets now see how to add a new lifecycle hook to our application.

Lifecycle Hooks Example
  • Basics of Javascript

*** Updated for latest version of Angular 2. Project works with Angular 4. ***

Learn all the essentials of building Angular 2+ applications right here. 

This is a beginner level course aimed at those new to Angular 2 and Typescript.  No previous knowledge of either is required before starting this course.

This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.



This is the best explain course on Angular 2 I've seen so far, keep up the good work!

-- Adrian T.


Excellent course, in a very short time span I come to know all the important information about Angular 2, this course really cover all the aspects of Angular 2 for beginners as well as for experience. Thank you very much for making such amazing course.

-- Subhobroto Roy


Great course! Perfect for beginners. It is exactly what I was looking for - building a real life project from scratch with a lot of explanations and examples. I highly recommend it for beginners!

-- Ivan Atanasov


Each section will contain an introduction to a new concept. Followed by a slide-based presentation to get you familiar with the concept, and then an example inside of our application to cement your understanding. 

You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data using observables, and bind data using expressions inside your HTML templates.

By the end of this course, you will have a clear understanding of how to to build Angular applications with many real-world features. As a result, you will feel empowered to go out into the wild and start creating your own Angular 2 applications!

What you'll learn:

  • Typescript
  • Components
  • Pipes
  • Data Binding
  • NgModules
  • Routing
  • Input/Output
  • HTTP
  • Observables 
  • Interfaces
  • Directives
  • Lifecycle Hooks


Course updated regularly with new content to stay relevant & up-to-date!



This course is accessible and gives information that are factual and easy to to understand (even to a newbie like me). The content of the technical part is easy to understand and straightforward making the course a great way to learn : first a part that explains the nature of the "code", then an example of application of the "code" ("code" is for all the different types : modals, interfaces, and so on). I highly recommend this course.

-- Geslin JB

Who this course is for:
  • Beginners to Angular 2