Angular 18 Full Course - Complete Zero To Hero Angular 18

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

What you'll learn

Master Angular 18 from the ground up – Understand the core building blocks like Components, Services, Modules, and more.

Dive deep into Angular’s inner workings to understand how it all fits together.

Build dynamic web applications using Angular's powerful tools and features.

Create reusable components to efficiently structure your Angular app.

Implement Dependency Injection and Services for clean, scalable architecture.

Master RxJS and Observables to handle asynchronous data flows in Angular.

Master Angular 18 New Reactive Programming Signals

Speed up development with Angular CLI commands and best practices.

Understand Angular lifecycle hooks and manage application state effectively.

Stay up to date with Angular 18's latest features and future-proof your skills.

Have in-depth knowledge how to build custom Attribute and Structural Directives

Understand key questions about Angular: Why Angular, what are the benefits?

Feel comfortable with Advanced topics like View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks and more

Requirements

Basic knowledge of HTML, CSS, and JavaScript is recommended.

Familiarity with TypeScript is helpful, but don't worry, we'll cover the essentials.

A computer with Node JS and npm installed (we’ll walk you through the setup).

Eagerness to learn and build amazing Angular apps!

Description

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 OverviewWe’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 @ComponentComponents @Input and @Output, and event EmittersControl flow syntax: @if, @for, @switchDirectives: ngFor, ngIf, ngClass, ngStyle, ngSwitch@defer for partial template loadingObservables, Built-In Pipes, Async Pipe, and Custom Pipes@Injectable and Custom ServicesLifecycle Hooks (ngOnInit, ngOnDestroy, etc.)HTTP Client - GET, POST, PUT, DELETE@ViewChild, @ViewChildren, @ContentChild, @ContentChildrenContent Projection with ng-content and ng-templateChange Detection (Normal and OnPush), View EncapsulationStructural and Attribute Directives (@Directive, @Host, @HostListener, @HostBinding)Dependency Injection (@Inject, @Optional, @Self, @SkipSelf)Custom Change DetectionAngular Elements and Standalone ComponentsAngular 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.

Overview

Section 1: Environment Setup

Lecture 1 Intro

Lecture 2 Code Editor Setup

Lecture 3 VSCODE First Look

Lecture 4 Vscode Theme Settings

Lecture 5 Font Setup

Lecture 6 Plugin Setup

Lecture 7 Install Node js and How to use NPM

Lecture 8 End

Section 2: First Step to Angular (Angular Setup & File Structure)

Lecture 9 Introduction to Angular

Lecture 10 What is Single Page Application

Lecture 11 Angular CLI

Lecture 12 First Angular Project

Lecture 13 NG SERVE Explained (BTS Process)

Lecture 14 Angular File Structure I

Lecture 15 Angular File Structure II

Lecture 16 Angular File Structure III

Section 3: Angular Stand Alone Components

Lecture 17 What is Angular Components

Lecture 18 Task !!! (Components)

Lecture 19 How Components Loads Inside the Browser

Lecture 20 Create Angular Component Manually

Lecture 21 Load The Component Inside The Browser I

Lecture 22 Load The Component Inside The Browser II

Lecture 23 Nesting Component

Lecture 24 Template Property

Lecture 25 Style Property

Lecture 26 Better Approach for Templates & Styles

Lecture 27 Generate Component Using Angular CLI

Section 4: Angular Data Binding & Event Handling

Lecture 28 String Interpolation (Text Interpolation)

Lecture 29 Deep Dive into String Interpolation

Lecture 30 Why This Called String Interpolation

Lecture 31 Property Binding

Lecture 32 String Interpolation VS Property Binding

Lecture 33 Class Binding

Lecture 34 Applying Class Binding on False Condition

Lecture 35 Task !!!

Lecture 36 Task Solution !!!

Lecture 37 Class Binding With String Values

Lecture 38 Angular Style Binding

Lecture 39 DOM Style Properties

Lecture 40 Multiple Style Bindings

Lecture 41 Class Binding VS Style Binding

Lecture 42 Event Binding

Lecture 43 More Event Bindings

Lecture 44 Event Filtering I

Lecture 45 Event Filtering II

Lecture 46 Template Variable

Lecture 47 Two Way Data Binding I

Lecture 48 Two Way Data Binding II

Lecture 49 One way VS Two Way Data Binding

Section 5: Angular Directives

Lecture 50 What is Angular Directives

Lecture 51 Component & Structural Directive

Lecture 52 NgIf Directive (Old Ways)

Lecture 53 @if Syntax (New Update)

Lecture 54 Else Condition Approach

Lecture 55 Ng-Template

Lecture 56 Multiple Conditions I - NgIf

Lecture 57 Multiple Conditions II - Using NgIf & Else

Lecture 58 Multiple Conditions III - @if New Syntax

Lecture 59 Difference Between if and if else

Lecture 60 NgIf - Number Values Conditions I

Lecture 61 @if - Number Values Conditions II

Lecture 62 NgIf - String Values Conditions I

Lecture 63 @if - String Values Conditions II

Lecture 64 Deep Dive into Ng-Template

Lecture 65 NgTemplateOutlet Directive

Lecture 66 Introduction to NgFor

Lecture 67 @for New Syntax Loop

Lecture 68 Fetch Unordered List

Lecture 69 Fetch Object Array

Lecture 70 Fetch Object Array - @for Syntax

Lecture 71 Angular Change Detection Mechanism I

Lecture 72 Angular Change Detection Mechanism II

Lecture 73 Angular For Loop Index I

Lecture 74 Angular For Loop Index II

Lecture 75 Users Array Length

Lecture 76 For Loop Count Property

Lecture 77 How to Handle Empty Array

Lecture 78 @empty syntax block

Lecture 79 First, last, Even and Odd For loop Property

Lecture 80 NgSwitchCase

Lecture 81 NgSwitchCase Default

Lecture 82 Switch Case @default New Syntax

Lecture 83 ngStyle Directive

Lecture 84 NgClass Directive

Lecture 85 Structural VS Attribute Directive

Section 6: Angular Components Relationship

Lecture 86 What is Component Relationship

Lecture 87 Parent-Child Relationship (Dive Deep)

Lecture 88 Parent-Child Data Flow I

Lecture 89 Parent-Child Data Flow II

Lecture 90 Parent-Child Multiple Data Flow

Lecture 91 Understand Parent-Child Data Flow

Lecture 92 Child to Parent Data Flow (@ViewChild) I

Lecture 93 Child to Parent Data Flow (@ViewChild) II

Lecture 94 Child to Parent Data Flow (@ViewChild) III

Lecture 95 Child to Parent Data Flow (@output & Event Emitter)

Lecture 96 Child to Parent Data Flow (@output & Event Emitter) II

Lecture 97 @viewChild VS @Output

Lecture 98 ng-content Content Projection

Lecture 99 Reusable Components

Lecture 100 Multi Slot Content Projection

Section 7: Angular LifeCycle Hooks

Lecture 101 What is LifeCycle Hooks

Lecture 102 Render Components Programmatically I

Lecture 103 Render Components Programmatically II

Lecture 104 NgOnChanges LifeCycle Hook I

Lecture 105 NgOnChanges LifeCycle Hook II

Lecture 106 NgOnInit LifeCycle Hook

Lecture 107 Constructor Method

Lecture 108 NgDoCheck LifeCycle Hook

Lecture 109 NgOnChanges VS NgDoCheck

Lecture 110 NgAfterContentInit LifeCycle hook

Lecture 111 NgAfterContentChecked LifeCycle Hook

Lecture 112 NgAfterViewInit LifeCycle Hook

Lecture 113 NgAfterViewChecked LifeCycle Hook

Lecture 114 NgOnDestroy LifeCycle Hook

Section 8: Angular Pipes

Lecture 115 What is this Angular Pipes

Lecture 116 Uppercase Pipe

Lecture 117 Lowercase & Title case Pipe

Lecture 118 Number Pipe

Lecture 119 Role of the String Interpolation in Angular Pipes

Lecture 120 Percentage & Currency Pipes

Lecture 121 Parameterized Pipes

Lecture 122 Date & Time Pipes

Lecture 123 Custom Date Formats

Lecture 124 Custom Time Formats

Lecture 125 JSON Pipe

Lecture 126 Slice Pipe

Lecture 127 Chaining Pipe

Section 9: Angular Services

Lecture 128 Intro to Angular Services

Lecture 129 Create Angular Service Manually

Lecture 130 Use Case of Angular Service I

Lecture 131 Use Case of Angular Service II

Lecture 132 Dependency Injection I

Lecture 133 Dependency Injection II

Lecture 134 Dependency Injection III

Lecture 135 How DI Works

Lecture 136 Generate Service Using Angular CLI

Lecture 137 Angular Services Use Case I

Lecture 138 Angular Services Use Case II

Lecture 139 Angular Interface

Lecture 140 Separate File For Angular Interface

Lecture 141 Handiling Optional fields

Section 10: Angular Forms (Template-Driven)

Lecture 142 Angular Template Driven Forms Intro

Lecture 143 Convert HTML Form to Angular Template Driven Form

Lecture 144 NgForm - FormGroup Class

Lecture 145 NgModel - FormControl Class

Lecture 146 Form Validation I

Lecture 147 Form Validation II

Lecture 148 Form Validation III

Lecture 149 Add Red Border to the Input

Lecture 150 MinLength Validation

Lecture 151 MaxLength Validation

Lecture 152 Email Validation

Lecture 153 Text Area Validation

Lecture 154 ngSubmit

Lecture 155 Disable Submit Button

Section 11: Angular Forms II (Reactive Forms)

Lecture 156 Section Intro (Reactive Forms)

Lecture 157 Reactive Form Setup

Lecture 158 Creating The Reactive Form Controls Programmatically

Lecture 159 Reactive Form Basic Validation

Lecture 160 Reactive Form Adding Multiple Validations

Lecture 161 Complete All Validations

Lecture 162 Reactive Form Submit And Getting Form Values

Lecture 163 Nested Form Groups

Lecture 164 Reactive Form Array

Lecture 165 Reactive Form Builder

Lecture 166 Adding Custom Validations I

Lecture 167 Adding Custom Validations II

Lecture 168 Adding Custom Validations III

Lecture 169 Section End

Section 12: Angular Routing & Navigation

Lecture 170 Section Intro

Lecture 171 What Is Angular Routing & Navigation

Lecture 172 How To Implement Angular Routing & Navigation

Lecture 173 Create New Angular App

Lecture 174 Configure Angular Router

Lecture 175 Angular Router Outlet

Lecture 176 Angular Router Link

Lecture 177 Angular Base Url

Lecture 178 Angular Base Router

Lecture 179 Router Vs Href

Lecture 180 Angular Routerlinkactive

Lecture 181 Router Parameter Variables

Lecture 182 Get Router Parameters

Lecture 183 What Is Observable

Lecture 184 Observable Subscribe

Lecture 185 Observable Next

Lecture 186 Observable Vs Functions

Lecture 187 Synchronous Vs Asynchronus Programming

Lecture 188 Observable Subscribe & Unsubscribe

Lecture 189 Multiple Router Parameters

Lecture 190 Query Parameters

Lecture 191 Separate Module For Angular Routing

Lecture 192 Navigate Programmatically

Lecture 193 Wild Card Routers

Lecture 194 Section End

Beginners who want to learn Angular from scratch and build dynamic web apps.,JavaScript developers looking to enhance their skills with a modern framework.,Developers familiar with other frameworks like React or Vue, wanting to master Angular.,Previous Angular users looking to upgrade their skills to Angular 18.,Anyone wanting to understand the inner workings of Angular and build scalable apps.