Angular Pro

Advanced, comprehensive, complete. Deep exploration of the framework, architect big apps.

Angular

v6.x

Duration

116 lessons, 16 hours

What you’ll learn

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.

FormControls and FormGroups 04:11

Todd Motto

Google Developer ExpertGoogle Developer Expert

Requirements

  • Angular knowledge
  • Component architecture
  • JavaScript knowledge

This course is the best resource for learning Angular, Todd teaches everything with all necessary details and with great examples. The Angular Pro course is incredible.

Victor Hazbun

CEO, CryptoLancerIO

Fantastic courses explained incredibly well. Very easy to follow and understand concepts. 10/10.

Nicolas Telfer

Co-founder, yourhomeintenerife.com

Absolutely fantastic courses. Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.

Jacob Cheriathundam

Development Architect, AccountsPro

These courses were able to boost my skills very quickly, answered my questions, helped me learn fast. Todd is here to teach the best practices!

Thibault Vieux

JavaScript Developer

Absolutely love these courses. Moving straight onto the Angular Pro course before getting started on my first full Angular project. Would recommend to any and all!

Simon M Lewis

JavaScript Engineer, Contract

Todd is an excellent instructor. It's the real ultimate guide to Angular! I highly recommend it. Thank you for all your contributions to the Angular community.

Sherry List

JavaScript, WomenTechMakers

Here’s what's covered…

Everything you need, structured and ready to go

Overview, setup and source files (3 lessons)

  • Course introduction

    00:23
  • Setup instructions

    Readme
  • Source files

    Readme

Advanced Components (21 lessons)

  • Content projection with ng-content

    02:54
  • Using ng-content with projection slots

    03:10
  • Projecting and binding to components

    04:35
  • @ContentChild and ngAfterContentInit

    07:32
  • @ContentChildren and QueryLists

    03:44
  • @ViewChild and ngAfterViewInit

    06:09
  • @ViewChildren and QueryLists

    05:12
  • @ViewChild and template #refs

    01:49
  • Using ElementRef and nativeElement

    03:58
  • Using the platform agnostic Renderer

    04:07
  • Dynamic components with ComponentFactoryResolver

    07:12 Watch lesson
  • Dynamic component @Input data

    02:51
  • Dynamic component @Output subscriptions

    02:04
  • Destroying dynamic components

    02:51
  • Dynamic components reordering

    03:26
  • Dynamic <ng-template> rendering with ViewContainerRef

    02:50 Watch lesson
  • Passing context to a dynamic <ng-template>

    03:47
  • Dynamic <ng-template> rendering with ngTemplateOutlet

    01:39
  • Using ngTemplateOutlet with context

    02:33
  • ViewEncapsulation and Shadow DOM

    05:43
  • ChangeDetectionStrategy.OnPush and Immutability

    06:22

Directives (5 lessons)

  • Creating a custom attribute Directive

    05:20
  • @HostListener and host Object

    05:34
  • Understanding @HostBinding

    03:33
  • Using the exportAs property with template refs

    05:20
  • Creating a custom structural Directive

    12:09

Custom Pipes (2 lessons)

  • Creating a custom pipe

    05:26
  • Pipes as providers

    04:00

Reactive Forms (18 lessons)

  • Reactive Forms setup

    05:59
  • FormControls and FormGroups

    08:17
  • Componentizing FormGroups

    13:13
  • Binding FormControls to <select>

    08:45
  • FormGroup collections with FormArray

    12:17 Watch lesson
  • Adding items to the FormArray

    06:38
  • Removing items from the FormArray

    07:08
  • FormBuilder API

    04:11
  • Http service and joining Observables

    23:21
  • Subscribing to the valueChanges Observable

    07:29
  • Updating and resetting FormGroups and FormControls

    05:07
  • Custom form control base

    08:42
  • Implementing a ControlValueAccessor

    14:01
  • Adding keyboard events to our control

    08:17
  • Validators object for FormControls

    06:44
  • FormControl (custom) validators

    09:40
  • FormGroup (custom) validators

    09:49 Watch lesson
  • Async (custom) validators

    12:06

Routing (16 lessons)

  • Enabling route tracing

    01:30
  • Subscribing to router events

    06:09
  • Router outlet events

    03:08
  • Dynamic route resolves with snapshots

    19:53
  • Auxiliary named router outlets

    05:12
  • Navigating to auxiliary named outlets

    04:30
  • Auxiliary Navigation API

    04:07
  • Destroying auxiliary outlets

    04:13
  • Resolving data for auxiliary outlets

    10:58
  • Lazy-loading modules

    09:59
  • Preloading lazy-loaded modules

    03:01
  • Custom preloading strategies

    07:15
  • Protecting lazy-loaded modules with canLoad

    09:25 Watch lesson
  • Guards with canActivate

    05:23
  • Guards with canActivateChild

    03:03
  • Guards with canDeactivate

    10:25

Unit Testing (10 lessons)

  • Karma setup and walkthrough

    02:58
  • Testing isolate Pipes

    05:43
  • Shallow testing Pipes

    14:31
  • Testing Services with dependencies

    12:24
  • Testing Component methods

    05:54
  • Testing @Input and @Output bindings

    04:47
  • Testing Component templates

    10:09
  • Testing container Components with async providers

    13:48 Watch lesson
  • Using NO_ERRORS_SCHEMA

    02:09
  • Testing an Attribute Directive

    06:35

Dependency Injection and Zones (7 lessons)

  • Providers and useValue

    06:12
  • Using InjectionToken

    04:01
  • Providers and useClass

    02:48
  • Providers and useFactory

    05:41
  • Providers and useExisting

    04:11
  • Configurable NgModules

    06:27
  • Zones and NgZone

    06:26

State Management with RxJS (8 lessons)

  • State Management architecture overview

    07:01
  • Creating an Observable Store with Rx

    16:44
  • Container components setup

    06:16
  • Populating the Store and component subscription

    13:39
  • Composing new Observable streams from our Store

    04:24
  • Integrating a stateless component

    08:46
  • Component outputs back to Service

    07:26
  • Updating our Store in a Service

    07:00

Final Project (29 lessons)

  • Setup instructions and code branches

    Readme
  • Project setup, walkthrough, install

    13:49 Watch lesson
  • Firebase CLI and initial AoT deploy

    11:10
  • AuthModule and child module setup

    10:00
  • Login/Register reactive form components

    21:23
  • AuthService and AngularFire integration

    21:59
  • Reactive Store and AngularFire Observables

    13:12
  • Stateless components and logout functionality

    16:24
  • HealthModule setup and lazy loading

    13:58
  • Implementing AuthGuards for lazy routes

    08:06
  • Data layer, initiate Observable streams

    20:13
  • Async Pipe "as" syntax and routing

    09:36
  • Component architecture and Reactive Forms

    25:37
  • Rendering streams into Stateless components

    10:04
  • Stateless components and removing items

    11:16
  • Route Params and Observable switchMaps

    11:05
  • Reactive Form outputs and async / await

    21:37
  • Workout module transition

    19:43
  • Custom FormControl with ControlValueAccessor

    13:20
  • Reactive Form conditionals

    09:41
  • Custom Workout / Meal Pipes

    10:47
  • Schedule Calendar, Observables, BehaviorSubject

    16:35
  • Schedule controls and Date logic

    12:51
  • Calendar date toggling

    09:18
  • Rendering schedule sections from Observables

    28:55
  • Emitting from Stateless components

    07:53
  • Schedule assignment and Store

    22:40
  • Hooking schedules into Firebase

    10:48
  • Project review and deployment

    05:56
Arrow down

Get the complete package...

Everything you need to start mastering Angular today

Angular Kickstart Package

2 courses

MOST POPULAR

Angular Ultimate Package

5 courses

100% money back guarantee

These courses are empowering thousands with expert knowledge - they will you too. If you're disappointed for whatever reason, you'll get every cent back.

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.