Learn Angular <span>Pro</span> the right way Angular Pro

Star Rating Star Rating Star Rating Star Rating Star Rating 4.8/5 (1902 ratings)
116 lessons 16 hours Up-to-date with v6.x
Todd Motto teaching Ultimate Courses

Todd Motto Google Developer expert Google Developer Expert

Unlock Angular’s potential. All the advanced features, RxJS, Reactive Forms, Modular Architecture, TypeScript concepts, State Management, Unit Testing and a final project to cement the knowledge.

Todd's Angular courses are one of the best online trainings that can be found.

John Oswalt Picture

John Oswalt

Technology Expert

Developers like me are starving for the knowledge you just served up. I've spent over $1,500 dollars in the last 7 months trying to learn what you gave me in a single course.

Chris Milford Picture

Chris Milford

Tech Lead

Todd brings unique enthusiasm, activity and expertise to the Angular community.

Brad Green Picture

Brad Green

Angular Product Manager

What you'll learn

Everything you need, structured and ready to go

Overview, setup and source files (3 lessons)

  • Play icon

    Course introduction

    00:23
  • Read icon

    Setup instructions

    Readme
  • Read icon

    Source files

    Readme

Advanced Components (21 lessons)

  • Play icon

    Content projection with ng-content

    02:54
  • Play icon

    Using ng-content with projection slots

    03:10
  • Play icon

    Projecting and binding to components

    04:35
  • Play icon

    @ContentChild and ngAfterContentInit

    07:32
  • Play icon

    @ContentChildren and QueryLists

    03:44
  • Play icon

    @ViewChild and ngAfterViewInit

    06:09
  • Play icon

    @ViewChildren and QueryLists

    05:12
  • Play icon

    @ViewChild and template #refs

    01:49
  • Play icon

    Using ElementRef and nativeElement

    03:58
  • Play icon

    Using the platform agnostic Renderer

    04:07
  • Play icon

    Dynamic components with ComponentFactoryResolver

    07:12 Watch lesson
  • Play icon

    Dynamic component @Input data

    02:51
  • Play icon

    Dynamic component @Output subscriptions

    02:04
  • Play icon

    Destroying dynamic components

    02:51
  • Play icon

    Dynamic components reordering

    03:26
  • Play icon

    Dynamic <ng-template> rendering with ViewContainerRef

    02:50 Watch lesson
  • Play icon

    Passing context to a dynamic <ng-template>

    03:47
  • Play icon

    Dynamic <ng-template> rendering with ngTemplateOutlet

    01:39
  • Play icon

    Using ngTemplateOutlet with context

    02:33
  • Play icon

    ViewEncapsulation and Shadow DOM

    05:43
  • Play icon

    ChangeDetectionStrategy.OnPush and Immutability

    06:22

Directives (5 lessons)

  • Play icon

    Creating a custom attribute Directive

    05:20
  • Play icon

    @HostListener and host Object

    05:34
  • Play icon

    Understanding @HostBinding

    03:33
  • Play icon

    Using the exportAs property with template refs

    05:20
  • Play icon

    Creating a custom structural Directive

    12:09

Custom Pipes (2 lessons)

  • Play icon

    Creating a custom pipe

    05:26
  • Play icon

    Pipes as providers

    04:00

Reactive Forms (18 lessons)

  • Play icon

    Reactive Forms setup

    05:59
  • Play icon

    FormControls and FormGroups

    08:17
  • Play icon

    Componentizing FormGroups

    13:13
  • Play icon

    Binding FormControls to <select>

    08:45
  • Play icon

    FormGroup collections with FormArray

    12:17 Watch lesson
  • Play icon

    Adding items to the FormArray

    06:38
  • Play icon

    Removing items from the FormArray

    07:08
  • Play icon

    FormBuilder API

    04:11
  • Play icon

    Http service and joining Observables

    23:21
  • Play icon

    Subscribing to the valueChanges Observable

    07:29
  • Play icon

    Updating and resetting FormGroups and FormControls

    05:07
  • Play icon

    Custom form control base

    08:42
  • Play icon

    Implementing a ControlValueAccessor

    14:01
  • Play icon

    Adding keyboard events to our control

    08:17
  • Play icon

    Validators object for FormControls

    06:44
  • Play icon

    FormControl (custom) validators

    09:40
  • Play icon

    FormGroup (custom) validators

    09:49 Watch lesson
  • Play icon

    Async (custom) validators

    12:06

Routing (16 lessons)

  • Play icon

    Enabling route tracing

    01:30
  • Play icon

    Subscribing to router events

    06:09
  • Play icon

    Router outlet events

    03:08
  • Play icon

    Dynamic route resolves with snapshots

    19:53
  • Play icon

    Auxiliary named router outlets

    05:12
  • Play icon

    Navigating to auxiliary named outlets

    04:30
  • Play icon

    Auxiliary Navigation API

    04:07
  • Play icon

    Destroying auxiliary outlets

    04:13
  • Play icon

    Resolving data for auxiliary outlets

    10:58
  • Play icon

    Lazy-loading modules

    09:59
  • Play icon

    Preloading lazy-loaded modules

    03:01
  • Play icon

    Custom preloading strategies

    07:15
  • Play icon

    Protecting lazy-loaded modules with canLoad

    09:25 Watch lesson
  • Play icon

    Guards with canActivate

    05:23
  • Play icon

    Guards with canActivateChild

    03:03
  • Play icon

    Guards with canDeactivate

    10:25

Unit Testing (10 lessons)

  • Play icon

    Karma setup and walkthrough

    02:58
  • Play icon

    Testing isolate Pipes

    05:43
  • Play icon

    Shallow testing Pipes

    14:31
  • Play icon

    Testing Services with dependencies

    12:24
  • Play icon

    Testing Component methods

    05:54
  • Play icon

    Testing @Input and @Output bindings

    04:47
  • Play icon

    Testing Component templates

    10:09
  • Play icon

    Testing container Components with async providers

    13:48 Watch lesson
  • Play icon

    Using NO_ERRORS_SCHEMA

    02:09
  • Play icon

    Testing an Attribute Directive

    06:35

Dependency Injection and Zones (7 lessons)

  • Play icon

    Providers and useValue

    06:12
  • Play icon

    Using InjectionToken

    04:01
  • Play icon

    Providers and useClass

    02:48
  • Play icon

    Providers and useFactory

    05:41
  • Play icon

    Providers and useExisting

    04:11
  • Play icon

    Configurable NgModules

    06:27
  • Play icon

    Zones and NgZone

    06:26

State Management with RxJS (8 lessons)

  • Play icon

    State Management architecture overview

    07:01
  • Play icon

    Creating an Observable Store with Rx

    16:44
  • Play icon

    Container components setup

    06:16
  • Play icon

    Populating the Store and component subscription

    13:39
  • Play icon

    Composing new Observable streams from our Store

    04:24
  • Play icon

    Integrating a stateless component

    08:46
  • Play icon

    Component outputs back to Service

    07:26
  • Play icon

    Updating our Store in a Service

    07:00

Final Project (29 lessons)

  • Read icon

    Setup instructions and code branches

    Readme
  • Play icon

    Project setup, walkthrough, install

    13:49 Watch lesson
  • Play icon

    Firebase CLI and initial AoT deploy

    11:10
  • Play icon

    AuthModule and child module setup

    10:00
  • Play icon

    Login/Register reactive form components

    21:23
  • Play icon

    AuthService and AngularFire integration

    21:59
  • Play icon

    Reactive Store and AngularFire Observables

    13:12
  • Play icon

    Stateless components and logout functionality

    16:24
  • Play icon

    HealthModule setup and lazy loading

    13:58
  • Play icon

    Implementing AuthGuards for lazy routes

    08:06
  • Play icon

    Data layer, initiate Observable streams

    20:13
  • Play icon

    Async Pipe "as" syntax and routing

    09:36
  • Play icon

    Component architecture and Reactive Forms

    25:37
  • Play icon

    Rendering streams into Stateless components

    10:04
  • Play icon

    Stateless components and removing items

    11:16
  • Play icon

    Route Params and Observable switchMaps

    11:05
  • Play icon

    Reactive Form outputs and async / await

    21:37
  • Play icon

    Workout module transition

    19:43
  • Play icon

    Custom FormControl with ControlValueAccessor

    13:20
  • Play icon

    Reactive Form conditionals

    09:41
  • Play icon

    Custom Workout / Meal Pipes

    10:47
  • Play icon

    Schedule Calendar, Observables, BehaviorSubject

    16:35
  • Play icon

    Schedule controls and Date logic

    12:51
  • Play icon

    Calendar date toggling

    09:18
  • Play icon

    Rendering schedule sections from Observables

    28:55
  • Play icon

    Emitting from Stateless components

    07:53
  • Play icon

    Schedule assignment and Store

    22:40
  • Play icon

    Hooking schedules into Firebase

    10:48
  • Play icon

    Project review and deployment

    05:56
Learn Angular <span>Pro</span> the right way

Angular Pro

116 lessons 16 hours

Save 32%

$129

$189

Save 17%

$499

$599

Save 18%

$899

$1099

Save 17%

$1499

$1799

Save 14%

$2499

$2899

Get the complete package...

Everything you need to start mastering Angular today

Angular Kickstart Package

2 courses 175 lessons 21 hours

Save 23%

$199

$258

Save 20%

$799

$995

Save 25%

$1499

$1990

Save 37%

$2499

$3980

Save 56%

$3499

$7960

Save 68%

$4499

$13930

Save 72%

$5499

$19900

Most popular

Angular Ultimate Package

5 courses 306 lessons 36 hours

Save 57%

$279

$645

Save 14%

$1199

$1395

Save 32%

$1899

$2790

Save 48%

$2899

$5580

Save 60%

$4499

$11160

Save 67%

$6499

$19530

Save 70%

$8499

$27900

Free NGRX image

30 day money back guarantee

These courses are empowering thousands with expert knowledge - they will you too. If you're disappointed for whatever reason, reach out to us within 30 days of your purchase.

Student and location discounts

Not-so-good exchange rate? (i.e. India/Brazil) Get in touch for a coupon. Student? Email us from your student email or attach your student ID.