Angular tutorial

Build modern web apps with Angular, one component at a time.

Course contents

Getting Started — What Angular is, why teams use it, how it differs from plain JavaScript, and how to install Node.js and the Angular CLI, create a project, read its files and run it.
Components — What a component is, standalone components, creating one with the CLI, the @Component decorator and its metadata, selectors, templates and styles, and how to render, nest and reuse components.
Angular Templates — How a template connects HTML to the component class: interpolation, property, attribute, class and style binding, event and two-way binding, expressions and statements, reference variables, ng-container and ng-template.
Styling Components — Adding CSS to components: inline and external styles, styleUrl and styleUrls, global styles, style encapsulation and its modes, the :host and :host-context() selectors, CSS custom properties, and sharing styles.

Directives — What directives are, the structural directives *ngIf, *ngFor and *ngSwitch, the modern @if, @for and @switch blocks, the attribute directives ngClass and ngStyle, best practices, and a first custom directive.
Pipes — What pipes are and why to use them, the built-in date, currency, number, percent, case and json pipes, chaining pipes, pipe parameters, and writing a custom pipe.
Event Handling — How Angular handles click, keyboard, input and change events, reading the event object, passing parameters to handlers, and preventing the browser's default behavior.
Component Communication — How parent and child components exchange data: @Input() for data going down, @Output() with EventEmitter for events going up, two-way binding between components, and best practices.
Component Lifecycle Hook — The stages of a component's life and the hooks Angular calls at each one, from ngOnChanges and ngOnInit to the content and view hooks and ngOnDestroy, with best practices.

Template-Driven Forms — Building forms in the template with FormsModule and ngModel: every common input type, handling input, tracking form state, submitting and resetting, and best practices.
Reactive Forms — Defining forms in the component class with FormControl, FormGroup, FormBuilder and FormArray, setting values with setValue and patchValue, and nesting groups.
Form Validation — Validating input with built-in and custom validators, control states, clear error messages, cross-field, real-time and conditional validation, and best practices.

Services — What services are, why apps use them, creating a service with @Injectable, storing shared state, and injecting a service into components.
Dependency Injection — How Angular dependency injection works: tokens, providers, providedIn, the injector hierarchy, root and component-level providers, injection tokens, scope and lifetime.

Routing — Mapping URLs to components with the Angular Router: route configuration, router-outlet, routerLink, programmatic navigation, redirects, route and query parameters, child, wildcard and lazy-loaded routes.

RxJS Fundamentals — Working with values over time using RxJS: Observables, observers, subscriptions, the pipe, map, filter, tap and switchMap operators, Subjects, BehaviorSubject, the async pipe, error handling and automatic cleanup with takeUntilDestroyed.

API Integration — Talking to a server with HttpClient: setup, environment files, the API service pattern, GET, POST, PUT and DELETE, headers, typed responses, loading indicators, error handling, interceptors, and a User Management capstone project.

Angular Signals — Storing and updating values with signals: writable signals, reading and updating values, computed signals, effects, signals compared with RxJS, and best practices.
State Management — Where to store app data: component state, shared state in services, BehaviorSubject and signal-based state, common patterns, and an overview of NgRx store, actions, reducers and selectors.

Client-Side Rendering — How Angular renders in the browser: bootstrap, initial rendering, re-rendering and its triggers, the advantages and limitations of CSR, and a Product Catalog capstone project.
Server-Side Rendering — Rendering pages on a Node.js server: the SSR architecture, pre-rendered HTML, hydration and event replay, data fetching and transfer, and a Blog Portal capstone project.
Static Site Generation — Generating HTML files at build time: prerendering static and parameterized routes, build-time data, deployment, and a Documentation Website capstone project.

User Access Control — Authentication and authorization in Angular: JWTs, an auth service, registration and login, token handling and expiration, interceptors, roles, route guards, error handling and logout, with a full capstone project.

Error Handling — Finding and handling errors: runtime, dependency injection and routing errors, ErrorHandler and a custom error handler, fallback UI, error logging, debugging and Angular DevTools.
Performance Optimization — Making apps fast: measuring performance, lazy loading, bundle optimization, change detection with Default and OnPush, track in @for, trackBy in *ngFor, and rendering best practices.

Capstone - Employee Management System — Build a complete Employee Management System: project structure, authentication and roles, reusable components, lazy routing, a signal store, reactive forms with validation, API integration, error handling and performance.

Cheat Sheet — A short reference of the whole course: structure, components, templates, binding, directives, pipes, forms, services, DI, routing, RxJS, HTTP, signals, state, render modes, security, errors and performance.