Angular 20 Full Course - Complete Zero to Hero Angular 20

Angular 20 Mastery: Harness Signals, defer, @if, @for and More for Advanced Core and Common Module Features

This course will give you a solid foundation in Angular 18 by providing an in-depth tour of all the advanced features available in the Angular Core and Common modules.

These two baseline modules are the foundation for everything in Angular, so mastering them in detail is essential. Angular has evolved significantly over the years, and with the introduction of Signals, there are now multiple ways to approach certain tasks. In this course, we’ll cover each feature from both perspectives—using Signals and decorators, where applicable.

In this course, you’ll get a comprehensive guided tour of both basic and advanced functionalities available in these essential Angular modules, including features like Angular Elements.

We’ll cover everything from the most commonly used Angular features to the more advanced topics, such as change detection modes, style isolation, dependency injection, content projection, internationalization, standalone components, and more.

The course assumes no prior Angular experience. Each concept builds upon the previous one, so there are no forward references, making the learning process smooth and logical.

While we start with Angular fundamentals, the course quickly transitions to intermediate and advanced topics, ensuring there's something for developers at every level.

To help you master the standalone components feature, we’ll dedicate a section on how to migrate existing applications to use standalone components and remove NgModules completely.

Course Overview

We’ll begin with a quick, practical introduction to the Angular framework. You’ll set up your development environment and use the Angular CLI to quickly scaffold a project.

With this playground, we’ll answer common Angular questions: Why Angular? What are its main advantages and key features? You’ll learn about change detection and get introduced to Angular’s template syntax.

Next, we’ll explore all the features of the Angular Core and Common modules, including:

• Custom components with @Component

• Components @Input and @Output, and event Emitters

• Control flow syntax: @if, @for, @switch

• Directives: ngFor, ngIf, ngClass, ngStyle, ngSwitch

• @defer for partial template loading

• Observables, Built-In Pipes, Async Pipe, and Custom Pipes

• @Injectable and Custom Services

• Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)

• HTTP Client - GET, POST, PUT, DELETE

• @ViewChild, @ViewChildren, @ContentChild, @ContentChildren

• Content Projection with ng-content and ng-template

• Change Detection (Normal and OnPush), View Encapsulation

• Structural and Attribute Directives (@Directive, @Host, @HostListener, @HostBinding)

• Dependency Injection (@Inject, @Optional, @Self, @SkipSelf)

• Custom Change Detection

• Angular Elements and Standalone Components

• Angular Signals and much more.

  
  

What Will You Learn In This Course?

By the end of this course, you will have advanced, practical knowledge of Angular 18. You’ll be confident in building Angular applications, with a detailed understanding of everything offered by Angular’s Core and Common modules.