Angular Tutorials

Angular from the ground up — components, templates, signals, dependency injection, routing, forms and shipping to production, every example lifted from a real ordering app.

• Angular – Interview Questions
  The questions Angular interviews actually ask, answered the way you would say them out loud. Signals versus observables, why standalone replaced NgModules, how dependency injection resolves, what `OnPush` really does, template-driven versus reactive forms, and the change-detection question that separates people who have shipped Angular from people who have read about it.
• Angular – Build and Deploy to Production
  The last mile. What `ng build` produces and how to read the bundle report, budgets that fail the build when a bundle grows, environment configuration without leaking secrets, the SPA rewrite rule every static host needs, cache headers for hashed assets, and a GitHub Actions workflow that ships it.
• Angular – Change Detection, OnPush and Zoneless
  Why an Angular app gets slow and what to do about it. How change detection actually works, what `OnPush` changes, and the zoneless mode signals made possible — the demo app runs with no zone.js at all and `OnPush` on every one of its components. Where `@defer` fits, route-level code splitting, and measuring with Angular DevTools rather than guessing.
• Angular – Testing
  Testing a pipe, a directive, a guard and an HTTP interceptor. When you need `TestBed` and when `new MyPipe()` is the better test, hosting a directive to exercise its selector, `HttpTestingController` and why `verify()` matters, driving a debounced search with fake timers, and where Playwright takes over from unit tests.
• Angular – State Management
  Most Angular apps do not need a state library, and the ones that do should be able to say why. The demo app splits it deliberately: signal-based services injected from the root for the customer screens, NgRx for the admin section. What each is good at, what `createFeature` buys you, and why registering the store on a lazy route keeps it out of everyone else's download.
• Angular – Reactive Forms and Validation
  Forms defined in the class, where they can be typed and tested. `FormControl`, `FormGroup` and `FormArray`, typed forms and why `nonNullable` matters, sync and async validators, cross-field validation, and mapping the server's field errors back onto the right controls after a failed submit.
• Angular – Template-Driven Forms
  The quicker of Angular's two form systems, and the right choice for a short form. `FormsModule` and `ngModel`, `ngForm` and template reference variables, the built-in validators, showing an error only once the field has been touched, and the point at which you should stop and reach for reactive forms instead.
• Angular – Guards, Resolvers and Lazy Loading
  Keeping signed-out visitors out of the admin area, and keeping the admin area out of everyone else's download. Functional `CanActivate` guards that return a `UrlTree`, `CanDeactivate` for the checkout page's unpaid order — including how returning a promise lets it ask in a modal instead of `window.confirm` — and `loadComponent` / `loadChildren` lazy loading with proof in the build output.
• Angular – Routing
  Turning URLs into components. `provideRouter()` and the route table, `<router-outlet>`, `routerLink` and `routerLinkActive`, route parameters and query parameters as signals via `withComponentInputBinding`, child routes and layouts, and the wildcard route that catches everything else.
• Angular – RxJS, and How Much of It You Still Need
  Signals took over state, but observables still own events over time. Built around one worked example — the menu search box — where `toObservable`, `debounceTime`, `distinctUntilChanged`, `switchMap` and `catchError` each fix a specific bug, and `toSignal` hands the result back to the template. Why `switchMap` and not `mergeMap` is the difference between correct and subtly wrong.
• Angular – HTTP Interceptors
  One place to attach the auth token, and one place to catch a 401. Functional interceptors and how they chain, adding an `Authorization` header, translating server errors into something the UI can show, a loading indicator driven by in-flight requests, and why interceptor order is not an implementation detail.
• Angular – Talking to an API with HttpClient
  Every real app is mostly API calls. `provideHttpClient()`, typed `get` / `post` / `put` / `delete`, query params and headers, unwrapping observables with the `async` pipe or `toSignal`, the newer `httpResource()` for read-only data, and where to put error handling so it is not repeated in every component.
• Angular – Services and Dependency Injection
  Dependency injection is the part of Angular that most repays understanding properly. Writing a service, `@Injectable({ providedIn: 'root' })` and what tree-shakeable providers buy you, the `inject()` function versus constructor injection, injection tokens for values that are not classes, and how the injector hierarchy decides which instance you get.
• Angular – The Component Lifecycle
  The hooks Angular calls on your component and the order they fire in: `ngOnInit`, `ngOnChanges`, `ngAfterViewInit`, `ngOnDestroy` and the rest. The striking thing about the demo app is how few it uses — one `ngOnInit` in thirty components — because signals, `effect`, `afterRenderEffect` and `DestroyRef` cover what they used to. This lesson is mostly about which ones you can now stop reaching for.
• Angular – computed and effect
  Derived state without the bugs. `computed()` for values that follow from other signals — cart totals, the filtered menu — and `effect()` for the side effects that must run when they change, including its `onCleanup` and the rule about not writing to signals inside one. Where `linkedSignal()` fits, and why this app never needed it.
• Angular – Signals
  Signals are how Angular tracks state now, and they are the biggest change to the framework in years. What a signal is, `signal()`, `set()` and `update()`, why reading one inside a template subscribes that template to it, and how signals let Angular skip change detection for everything that did not change.
• Angular – Component Styles, Sass and Bootstrap
  Angular scopes a component's styles to that component by default, which changes how you think about CSS. View encapsulation and the attribute selectors it emits, `:host` and `:host-context`, `[class]` and `[style]` bindings, and layering Sass overrides on Bootstrap in `angular.json` so they win without a single `!important`.
• Angular – Pipes
  Formatting values in the template without cluttering the class. `DatePipe`, `CurrencyPipe`, `DecimalPipe` and `AsyncPipe`, chaining pipes and passing arguments, writing a custom pipe, and the pure-versus-impure distinction that decides whether your pipe runs once or on every change detection pass.
• Angular – Directives
  A directive is a component without a template — behaviour you attach to an element you did not write. The built-in attribute directives, writing your own with `@Directive` and an attribute selector, why the work belongs in `afterNextRender` rather than the constructor, input transforms with `booleanAttribute`, and where `host` bindings and `hostDirectives` fit.
• Angular – Content Projection and ng-template
  Writing a component that wraps content it does not own. Single-slot and multi-slot `<ng-content>`, selecting what lands where, `<ng-template>` and `<ng-container>` and the difference between them, and `ngTemplateOutlet` for the cases where a slot is not flexible enough.
• Angular – Inputs, Outputs and Two-Way Binding
  How data goes down and events come back up. The signal-based `input()`, `output()` and `model()` functions that replaced the `@Input` and `@Output` decorators, required versus optional inputs, input transforms, and how `model()` gives you `[(value)]` on your own component for free.
• Angular – Control Flow with @if, @for and @switch
  Angular 17 replaced `*ngIf`, `*ngFor` and `*ngSwitch` with built-in block syntax, and the old directives are on the way out. `@if` / `@else`, `@for` with its mandatory `track` and its `@empty` block, `@switch`, `@let`, and what to do when you meet the structural-directive form in an older codebase — as the demo app's navbar still does.
• Angular – Handling Events
  `(click)`, `(submit)`, `(input)` and the rest: binding a DOM event to a method, what `$event` holds, keyboard event filters like `(keydown.enter)`, and why putting real logic in the template instead of the class is the mistake that costs you later.
• Angular – Templates and Data Binding
  Four kinds of binding and when each applies: `{{ }}` interpolation, `[property]` binding, `(event)` binding and `[(ngModel)]` two-way binding. Why `[src]` is not the same as `src=`, what a template reference variable is for, and the expression rules Angular enforces inside a template.
• Angular – Your First Component
  A component is a class with a template and a selector, and in modern Angular that is all it is — no NgModule required. The `@Component` decorator field by field, standalone components and why they are now the default, inline versus separate template files, and how a component ends up on the page.
• Angular – The TypeScript You Need First
  Angular is TypeScript-first, and the parts of the language it leans on hardest are the ones tutorials skip. Interfaces for API shapes, generics, decorators and why Angular uses them, strict null checks, and the `readonly` and `as const` habits that keep a component's inputs honest.
• Angular – Set Up a Project with the Angular CLI
  One command scaffolds the project: what `ng new` actually generates, what each file is for, how `angular.json` and the three tsconfigs fit together, where `bootstrapApplication` and `app.config.ts` replaced the old root NgModule, and the handful of `ng` commands you will run every day.
• Angular – Get Started
  Start here. What Angular is and what problem it solves, how it differs from React and when a team picks it, the exact versions this track is written against — Angular 21, TypeScript 5.9, Bootstrap 5 — one command to create a project and see it running, the demo application every example is taken from, and the full lesson index in reading order.