Course Highlights
  • Code in Github repository with downloadable ZIP files per section
  • Understand key questions about Angular: Why Angular, what are the benefits?
  • Know how to build and style your own custom Angular Components
  • Learn in detail all the functionality available in Core Directives
  • Feel comfortable with Intermediate topics like Template Querying, Content Projection, Dynamic Templates and more
  • Have in-depth knowledge how to build custom Attribute and Structural Directives
  • Feel comfortable with Advanced topics like View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks and more
  • Learn in detail about custom Modules, custom Pipes and Internationalization (i18n)
  • Learn all about Angular Elements (Advanced)
Skills you will learn!
Curriculum

6 Topics
Angular Core Deep Dive - Introduction
IMPORTANT - Recommended Software Versions
Course Kickoff - Development Environment Setup
The Typescript Jumpstart Ebook
Introduction To Angular - Custom HTML Elements Model vs View
Why Angular? Learn the Key Features of Angular Core

23 Topics
New Section - Angular Components and Core Directives
Building our First Angular Component
Component Inputs and the @Input Decorator
Angular Component @Output - Custom Events and Event Emitters
Angular 17 Control Flow Syntax
The Angular 17 @for syntax
Angular @for @empty $index and other extra options
Understanding Angular 17 @for tracking functions
What's Next - The ngFor Directive
The Angular ngFor Core Directive
Angular 17 - Comparison between @for and ngFor
Angular 17 - @if Section Introduction
The Angular 17 @if else syntax
What's Next - The ngIf Directive
Angular ngIf Directive and the Elvis Operator
Angular 17 - Comparison between @if vs ngIf
Angular ngClass Core Directive - Learn All Features
Angular ngStyle Core Directive - When to use it and Why
Angular 17 @switch Section Introduction
The Angular 17 @switch syntax in action
Angular ngSwitch Core Directive In Detail
Angular ng-container Core Directive - When to use it?
Angular Built-In Pipes - Complete Catalog

4 Topics
Angular View Child Decorator - How Does it Work?
View Child - Learn the multiple View Query Configuration Options
The AfterViewInit Lifecycle Hook - How deep can we query with View Child?
The View Children Decorator and Query List In Detail

3 Topics
Angular Content Projection with ng-content In Detail
Angular Content Child Decorator - In-Depth Explanation
Angular Content Children and the AfterContentInit Lyfecycle Hook

3 Topics
Angular Templates Introduction with ng-template
Angular Template Instantiation with ngTemplateOutlet
Angular Templates as Component Inputs

6 Topics
Introduction to Angular Attribute Directives
Angular Host Binding in Detail - DOM Properties vs Attributes
Angular Host Listener - Handling Events in Directives
Angular Directive Export As syntax - When to Use it and Why
Angular Structural Directives - Understanding the Star Syntax
Angular Structural Directives - Step-by-Step Implementation

5 Topics
Angular View Encapsulation - Under the Hood
Angular View Encapsulation - the Host Selector
Bypassing View Encapsulation with the ng-deep modifier
The Host Context Selector - Theming Use Case
Angular View Encapsulation - Default vs Shadow DOM

6 Topics
Angular Injectable Services - New Section Introduction
The Angular HTTP Client - GET calls with Request Parameters
The Async Pipe - a Better way of passing Observable data to the View
Angular Custom Services - The Injectable Decorator
Angular Custom Service - Fetching Data
Angular Custom Service - Data Modification with an HTTP PUT

8 Topics
Introduction to the Angular Dependency Injection System
Angular DI - Understanding Providers and Injection Tokens
Angular DI - Understanding Simplified Provider Configuration
Understanding Hierarchical Dependency Injection
Understanding Angular Tree-Shakeable Providers
Angular DI - Injection Tokens In Detail
Angular DI Decorators - Optional Self SkipSelf
Angular DI Host Decorator and Section Conclusion

5 Topics
Angular Default Change Detection - How does it Work?
Angular OnPush Change Detection - How does it Work?
OnPush Change Detection and Observables Data Streams
Angular Attribute Decorator - When to use it?
Angular Custom Change Detection with ChangeDetectorRef

5 Topics
Angular Lifecycle Hooks - OnInit and OnDestroy In Detail
Angular OnChanges Lifecycle Hook
Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls
Angular AfterViewChecked Lifecycle Hook - Use Cases and Pitfalls
Angular Lifecycle Hooks - Complete Overview

2 Topics
Introduction to Angular Modules
Angular Feature Modules In Detail

2 Topics
Angular Custom Pipes - Step-by-Step Implementation
Angular Impure Pipes In Detail

5 Topics
Introduction to Angular Internationalization (i18n)
Understanding Angular i18n Unique Identifiers
Angular i18n Pluralization Support
Angular i18n Alternative Expressions Support
Running a Translated Angular Application using the Angular CLI

1 Topic
Angular Elements In Detail

4 Topics
Angular Standalone Components - New Section
Migrating To Standalone Components Step 1 - Importing Dependencies
Migrating To Standalone Components Step 2 - Removing Unused Modules
Migrating To Standalone Components Step 3 - Refactor Application Bootstrapping

11 Topics
Angular 17 @defer Section Introduction
Angular 17 @defer - How Does It Work?
Angular 17 @defer with @placeholder
Angular 17 @defer with @loading
Angular 17 @defer trigger (idle and immediate triggers)
Angular 17 @defer timer trigger - Understanding prefetch triggers
Angular 17 @defer @error block
Angular 17 @defer - The viewport built-in trigger
Angular 17 @defer - The built-in interaction trigger
Angular 17 @defer- the built-in on hover trigger
Angular 17 @defer Custom Triggers

12 Topics
Angular 17 Signals - Section Introduction
Introduction to Angular 17 Signals - Writing our first Signal
The Angular 17 Signal update() API and Read Only Signals
Angular Signals with Objects and Arrays - Avoid mutating signal values directly
Angular 17 derived signals with the compute() API
Understanding how dependencies between signals are created
The Angular 17 Signal effect() API
Angular 17 - Cleaning up Signal Effects manually
Angular 17 Signal-based Data Services
Introduction To Angular Input Signals - How Do They Compare With @Input?
How To Use Signal Inputs To Avoid The OnChanges Lifecycle Hook
Signal Input Options required alias transform functions

2 Topics
Bonus Lecture (Updated September 2024)
Angular Core Deep Dive - Course Conclusion and Key Takeaways

  Write a Review

Angular Deep Dive - Beginner to Advanced (Angular 18)

Go to Paid Course