Learn Angular

Angular lessons, examples, and practical exercises

  1. Angular Introduction

    Angular is a free, open-source web application framework maintained by Google and its developer community.

  2. Single-Page Applications

    SINGLE-PAGE APPLICATION (SPA) - QUICK REVISION

  3. Decorators

    A decorator adds metadata to a class or class member so Angular knows how to create and use it.

  4. Components

    Build focused Angular UI blocks with a class, template, styles, inputs, outputs, and clear parent-child data flow.

  5. Component Lifecycle Hooks

    Creation order:

  6. Templates

    A template is HTML enhanced with Angular syntax.

  7. Routing

    The Angular Router maps URLs to components in a single-page application.

  8. Services and Dependency Injection

    Control whether a dependency is global or isolated to part of the component tree.

  9. Route Guards

    Guards decide whether navigation may continue.

  10. Angular Signals

    A signal stores a value and notifies consumers when that value changes.

  11. Observables, Subjects, and BehaviorSubject

    OBSERVABLE, SUBJECT, AND BEHAVIORSUBJECT - QUICK REVISION

  12. ng-template, ng-content, and ng-container

    NG-TEMPLATE, NG-CONTENT, AND NG-CONTAINER - QUICK REVISION

  13. Angular Forms

    Angular offers three form styles:

  14. Selectors

    Learn and revise Selectors.

  15. Components

    Combine behavior, a template, and styles into a reusable UI unit.

  16. Directives

    Add reusable DOM behavior without creating another visual component.

  17. Pipes

    A pipe transforms data for display without changing the original value.

  18. Data Binding

    Data binding connects component state with the template.

  19. Modules

    The word "module" can mean two different things:

  20. Standalone Components

    A standalone component does not need to be declared in an NgModule.

  21. trackBy List Performance

    Tracking gives each list item a stable identity.

  22. Web Workers

    A Web Worker runs CPU-intensive JavaScript on a background thread so the browser's main thread can remain responsive.

  23. Compiler vs Interpreter

    Both compilers and interpreters turn source code into something a computer can execute.

  24. APP_INITIALIZER

    Use provideAppInitializer() for work that must finish during application startup, such as loading external configuration.

  25. HTTP Interceptors

    An interceptor processes HTTP requests and responses in one central place.

  26. Angular Project File Structure

    An Angular workspace contains configuration, dependencies, source code, tests, and static files.

  27. Component Communication

    Choose stable decorator APIs or adopt signal inputs with their v18 preview status understood.

  28. RxJS Mapping and Combination Operators

    Use forkJoin when independent HTTP requests should run together and you need one result after all complete.

  29. RxJS pairwise Operator

    pairwise() emits the previous and current source values as a tuple.

  30. OnPush Change Detection

    OnPush allows Angular to skip a component subtree when it has no relevant change notification.

  31. Annotations

    In everyday Angular discussion, "annotation" usually means metadata that describes a class.

  32. Angular Performance

    Measure first with browser tools, Angular DevTools, and bundle analysis.

  33. JavaScript Basics

    Angular uses TypeScript, and TypeScript is JavaScript with types.

  34. TypeScript Basics

    TypeScript is a strongly typed superset of JavaScript maintained by Microsoft.