Hackr.io is a community to find and share the best online courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:


Anybody can submit a course or a tutorial


Community upvotes the useful tutorials


The best tutorials rise to the top

Angular 6 - The Complete Guide (udemy.com)

Visit Tutorial
My Courses
Paid Video Beginner Angular 6
Top Three Medal #3 out of total 57 Angular tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course depth and Coverage

Course Pace

Add your one-liner review here:

Tutorial Info

Self Paced
28 hours on-demand video
Available On Completion
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • Develop modern, complex, responsive and scalable web applications with Angular 6
  • Fully understand the architecture behind an Angular 6 application and how to use it
  • Use their gained, deep understanding of the Angular 6 fundamentals to quickly establish themselves as frontend developers
  • Create single-page applications with on of the most modern JavaScript frameworks out there


  • NO Angular 1 or Angular 2 knowledge is required!
  • Basic HTML and CSS knowledge helps, but isn't a must-have
  • Prior TypeScript knowledge also helps but isn't necessary to benefit from this course
  • Basic JavaScript knowledge is required



This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 6 simply is the latest version of Angular 2)

Join the most comprehensive and popular Angular 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 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 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! ;-)

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

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 team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

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

Why Angular?

Angular 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 allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 6 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular 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 (=Angular 6) 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.

Get a very deep understanding of how to create Angular 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 offers and how to apply them correctly.

Specifically you will learn:

    • Which architecture Angular uses
    • How to use TypeScript to write Angular 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
    • How to optimize your (bigger) Angular Application
    • We will build a major project in this course
    • and much more!

Pay once, benefit a lifetime!

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


Getting Started

Course Introduction

What is Angular?

Angular vs Angular 2 vs Angular 6

CLI Deep Dive & Troubleshooting

Project Setup and First App

Editing the First App

The Course Structure

How to get the Most out of the Course

What is TypeScript?

A Basic Project Setup using Bootstrap for Styling

Where to find the Course Source Code

The Basics

Module Introduction

How an Angular App gets Loaded and Started

Components are Important!

Creating a New Component

Understanding the Role of AppModule and Component Declaration

Using Custom Components

Creating Components with the CLI & Nesting Components

Working with Component Templates

Working with Component Styles

Fully Understanding the Component Selector

Practicing Components

What is Databinding?

String Interpolation

Property Binding

Property Binding vs String Interpolation

Event Binding

Bindable Properties and Events

Passing and Using Data with Event Binding

Important: FormsModule is Required for Two-Way-Binding!


Combining all Forms of Databinding

Practicing Databinding

Understanding Directives

Using ngIf to Output Data Conditionally

Enhancing ngIf with an Else Condition

Styling Elements Dynamically with ngStyle

Applying CSS Classes Dynamically with ngClass

Outputting Lists with ngFor

Practicing Directives

Getting the Index when using ngFor

Course Project - The Basics

Project Introduction

Planning the App

Installing Bootstrap Correctly

Setting up the Application

Creating the Components

Using the Components

Adding a Navigation Bar

Alternative Non-Collapsable Navigation Bar

Creating a "Recipe" Model

Adding Content to the Recipes Components

Outputting a List of Recipes with ngFor

Displaying Recipe Details

Working on the ShoppingListComponent

Creating an "Ingredient" Model

Creating and Outputting the Shopping List

Adding a Shopping List Edit Section

Wrap Up & Next Steps


Understanding Angular Error Messages

Debugging Code in the Browser Using Sourcemaps

Using Augury to Dive into Angular Apps

Components & Databinding Deep Dive

Module Introduction

Splitting Apps into Components

Property & Event Binding Overview

Binding to Custom Properties

Assigning an Alias to Custom Properties

Binding to Custom Events

Assigning an Alias to Custom Events

Custom Property and Event Binding Summary

Understanding View Encapsulation

More on View Encapsulation

Using Local References in Templates

Getting Access to the Template & DOM with @ViewChild

Projecting Content into Components with ng-content

Understanding the Component Lifecycle

Seeing Lifecycle Hooks in Action

Lifecycle Hooks and Template Access

Getting Access to ng-content with @ContentChild

Wrap Up

Practicing Property & Event Binding and View Encapsulation

Course Project - Components & Databinding


Adding Navigation with Event Binding and ngIf

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Make sure you have FormsModule added!

Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive

Module Introduction

ngFor and ngIf Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Using the Renderer to build a Better Attribute Directive

More about the Renderer

Using HostListener to Listen to Host Events

Using HostBinding to Bind to Host Properties

Binding to Directive Properties

What Happens behind the Scenes on Structural Directives

Building a Structural Directive

Understanding ngSwitch

Course Project - Directives

Building and Using a Dropdown Directive

Using Services & Dependency Injection

Module Introduction

Why would you Need Services?

Creating a Logging Service

Injecting the Logging Service into Components

Creating a Data Service

Understanding the Hierarchical Injector

How many Instances of Service Should It Be?

Injecting Services into Services

Using Services for Cross-Component Communication

Practicing Services

Services in Angular 6

Course Project - Services & Dependency Injection


Setting up the Services

Managing Recipes in a Recipe Service

Using a Service for Cross-Component Communication

Adding the Shopping List Service

Using Services for "Push Notifications"

Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing

Module Introduction

Why do we need a Router?

Understanding the Example Project

Setting up and Loading Routes

Navigating with Router Links

Understanding Navigation Paths

Styling Active Router Links

Navigating Programmatically

Using Relative Paths in Programmatic Navigation

Passing Parameters to Routes

Fetching Route Parameters

Fetching Route Parameters Reactively

An Important Note about Route Observables

Passing Query Parameters and Fragments

Retrieving Query Parameters and Fragments

Practicing and some Common Gotchas

Setting up Child (Nested) Routes

Using Query Parameters - Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Important: Redirection Path Matching

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with canActivate

Protecting Child (Nested) Routes with canActivateChild

Using a Fake Auth Service

Controlling Navigation with canDeactivate

Passing Static Data to a Route

Resolving Dynamic Data with the resolve Guard

Understanding Location Strategies

Wrap Up

Course Project - Routing

Planning the General Structure

Setting Up Routes

Adding Navigation to the App

Marking Active Routes

Fixing Page Reload Issues

Child Routes: Challenge

Adding Child Routing Together

Configuring Route Parameters

Passing Dynamic Parameters to Links

Styling Active Recipe Items

Adding Editing Routes

Retrieving Route Parameters

Programmatic Navigation to the Edit Page

One Note about Route Observables

Project Cleanup

Understanding Observables

Module Introduction

Angular 6 & RxJS 6

Analyzing a Built-in Angular Observable

Building & Using a First Simple Observable

Building & Using a Custom Observable from Scratch


Where to learn more

Using Subjects to Pass AND Listen to Data

Understanding Observable Operators

RxJS 6 without rxjs-compat

Wrap Up

Course Project - Observables

Improving the Reactive Service with Observables (Subjects)

Handling Forms in Angular Apps

Module Introduction

Why do we Need Angular's Help?

Template-Driven (TD) vs Reactive Approach

An Example Form

TD: Creating the Form and Registering the Controls

TD: Submitting and Using the Form

TD: Understanding Form State

TD: Accessing the Form with @ViewChild

TD: Adding Validation to check User Input

Built-in Validators & Using HTML5 Validation

TD: Using the Form State

TD: Outputting Validation Error Messages

TD: Set Default Values with ngModel Property Binding

TD: Using ngModel with Two-Way-Binding

TD: Grouping Form Controls

TD: Handling Radio Buttons

TD: Setting and Patching Form Values

TD: Using Form Data

TD: Resetting Forms

Practicing Template-Driven Forms

Introduction to the Reactive Approach

Reactive: Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting the Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Reactive: Arrays of Form Controls (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Async Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

Practicing Reactive Forms

Course Project - Forms


TD: Adding the Shopping List Form

Adding Validation to the Form

Allowing the Selection of Items in the List

Loading the Shopping List Items into the Form

Updating existing Items

Resetting the Form

Allowing the the User to Clear (Cancel) the Form

Allowing the Deletion of Shopping List Items

Creating the Template for the (Reactive) Recipe Edit Form

Creating the Form For Editing Recipes

Syncing HTML with the Form

Adding Ingredient Controls to a Form Array

Adding new Ingredient Controls

Validating User Input

Submitting the Recipe Edit Form

Adding a Delete and Clear (Cancel) Functionality

Redirecting the User (after Deleting a Recipe)

Adding an Image Preview

Providing the Recipe Service Correctly

Deleting Ingredients and Some Finishing Touches

Using Pipes to Transform Output

Introduction & Why Pipes are Useful

Using Pipes

Parametrizing Pipes

Where to learn more about Pipes

Chaining Multiple Pipes

Creating a Custom Pipe

Parametrizing a Custom Pipe

Example: Creating a Filter Pipe

Pure and Impure Pipes (or: How to "fix" the Filter Pipe)

Understanding the "async" Pipe

Practicing Pipes

Making Http Requests

MUST READ: Angular 6 and Http

Introduction & How Http Requests Work in SPAs

Firebase & The Right Database

Example App & Backend Setup

Sending Requests (Example: POST Request)

Adjusting Request Headers

Sending GET Requests

Sending a PUT Request

RxJS 6 without rxjs-compat

Transform Responses Easily with Observable Operators (map())

Using the Returned Data

Catching Errors without rxjs-compat

Catching Http Errors

Using the "async" Pipe with Http Requests

Course Project - Http


Setting up Firebase as a Dummy Backend

Sending PUT Requests to Save Data

GETting Back the Recipes

Transforming Response Data to Prevent Errors

Authentication & Route Protection in Angular Apps

Module Introduction

How Authentication Works in Single-Page-Applications

More about JWT

Creating a Signup Page and Route

Setting up the Firebase SDK

Use getIdToken() instead of getToken()

Signing Users Up

Signin Users In

Requiring a Token (on the Backend)

Sending the Token

Checking and Using Authentication Status

Adding a Logout Button

Route Protection and Redirection Example

Wrap Up

Possible Improvements

Using Angular Modules & Optimizing Apps

Module Introduction

The Idea behind Modules

Understanding the App Module

Understanding Feature Modules

Creating a Recipe Feature Module

Module Import Order

Registering Routes in a Feature Module

Understanding Shared Modules

Creating a Shared Module

Creating a Shopping List Feature Module

Loading Components via Selectors vs Routing

A Common Gotcha

Creating the Auth Feature Module

Understanding Lazy Loading

Adding Lazy Loading to the Recipes Module

Protecting Lazy Loaded Routes with canLoad

How Modules and Services Work Together

Understanding the Core Module

Creating a Basic Core Module

Restructuring Services to use the Child Injector

Using Ahead-of-Time Compilation

How to use AoT Compilation with the CLI

Preloading Lazy Loaded Routes

Wrap Up

Deploying an Angular App

Module Introduction

Deployment Preparations and Important Steps

Example: Deploying to AWS S3

Bonus: The HttpClient

Module Introduction

The Documentation


Request Configuration and Response

Requesting Events

Settings Headers

Http Parameters


Change Firebase Rules Temporarily


Modifying Requests in Interceptors

Modifying Requests in Interceptors

Wrap Up

Useful Resources & Links

Bonus: Working with NgRx in our Project

Module Introduction

Important: Angular 6, RxJS 6 and this section!

State Challenges

Getting Started with Reducers

Adding Actions

Finishing the First Reducer

Registering the Application Store

Selecting Data from State

Dispatch Actions

More Actions and Adding Ingredients

Dispatching Update and Deleting Shopping List Actions

Expanding App State

Editing the Shopping-List via NgRx

Managing all Relevant State

Authentication and Side Effects - Introduction

Setting up the Auth Store Files

The Reducer

Adding Reducer Logic & Actions

Adjusting the App Module Setup

Using Authentication

Dispatch Actions

Getting State Access in Http Interceptor

Handling the Auth Token

Only React to Actions Once via take(1)

A Closer Look at Effects

Auth Effects and Actions

Effects - How they Work

Adding Auth Signup

Adding Auth Signin

Navigation as a Side Effect

Handling Logout via NgRx

Additional Fixes

Redirecting Upon Logout

What's Next?

The Router Store Package

Store Devtools

Lazy Load and Dynamic Injection

Adding Recipe Actions

Adding Recipe Reducers

Dispatching and Selecting State

Viewing and Deleting Recipes via NgRx

Editing and Updating Recipes via NgRx

Recipes Side Effects - Fetching from Server

Recipes Side Effects - Storing Recipes on Server

Cleaning Up

Updating to RxJS 6+

Wrap Up

Useful Resources & Links

Bonus: Angular Universal

Module Introduction

Getting Started with Angular Universal

Working on the App Module

Adding a Server-Side Build Workflow

Adding a NodeJS Server

Pre-Rendering the App on the Server

Next Steps

Angular Universal Gotchas

Angular Animations

Making Animations Work with Angular 4+


Setting up the Starting Project

Animations Triggers and State

Switching between States


Advanced Transitions

Transition Phases

The "void" State

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Adding Offline Capabilities with Service Workers

Module Introduction

Adding Service Workers

Caching Assets for Offline Use

Caching Dynamic Assets & URLs

Further Links & Resources

A Basic Introduction to Unit Testing in Angular Apps

About this Section


Why Unit Tests?

Analyzing the Testing Setup (as created by the CLI)

Running Tests (with the CLI)

Adding a Component and some fitting Tests

Testing Dependencies: Components and Services

Simulating Async Tasks

Using "fakeAsync" and "tick"

Isolated vs Non-Isolated Tests

Further Resources & Where to Go Next

Course Roundup

Course Roundup

Angular 6 Changes & New Features

What changed with Angular 6?

A First Look At Angular Elements

Additional Resources & Articles

Custom Project & Workflow Setup


Initializing the Project

Setting up the Basic Project Files

Installing the Core Dependencies

Filling the Project Files with Some Life

index.html & Polyfills

Installing Development Dependencies

Setting up a Development Workflow

Updating to Angular 6 + Webpack 4

Finishing & Using the Development Workflow

Setting up a Production Workflow

Adding Types & Fixing Bugs

Finishing Touches

Bonus: TypeScript Introduction (for Angular 2 Usage)


Using Types




Wrap up & Modules

Deep dive into TypeScript

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Kickstart the conversation!

More Angular Tutorials