Angular Roadmap
This Angular Roadmap is a free, full-text syllabus of 158 lessons in 26 stages, starting with Introduction to Angular and ending with Animation. It suits anyone who wants to learn Angular, whether new to it or filling gaps. There is no fixed length: every lesson is open from the start, so you go at your own pace and skip what you already know.
Last updated
Reading is open to everyone. Sign in to join this roadmap and track what you finish.
Continue learning
1. Introduction to AngularIntroduction to Angular
0%Introduction to Angular
4 topics · 3 sub-topics · 0 completed
The diagram draws the same 158 lessons as a map, with lines showing the order. It needs JavaScript; the full syllabus below lists every lesson as text.
Full syllabus: every lesson in the Angular roadmap
26 stages and 158 lessons, in the order the roadmap suggests. Every lesson is free to read and open from the start.
Stage 1: Introduction to Angular
Introduction to Angular
Angular is a popular open-source front-end web application framework developed by Google. It is written in TypeScript and allows developers to build dynamic, single-page web applications with ease. Angular provides a comprehensive set of features for creating interactive and responsive user interfaces, making it a…
Angular and History
Angular is a TypeScript-based open-source front-end web framework developed and maintained by Google. It is used for building dynamic, single-page web applications (SPAs). Angular provides comprehensive tools, including dependency injection, data binding, routing, and testing, to create robust and scalable web…
Angular Architecture
Angular follows a modular architecture pattern, dividing the application into distinct modules, components, services, and other elements, which enhances code organization and maintainability. The key building blocks include modules, which are containers grouping related components, services, directives, and other…
Setting up a New Project
Setting up a new Angular project is streamlined by the Angular CLI, a command-line interface that automates the initial setup. First, ensure Node.js and npm are installed, then globally install the CLI itself via npm install -g @angular/cli. With the CLI in place, navigate to your desired directory and initiate a…
Stage 2: Components
Components
Components are the main building block for Angular applications. Each component consists of:
Component Anatomy
Angular components are the foundational building blocks of Angular applications, designed to encapsulate both the UI and the business logic.
Creating Components
You can either use Angular CLI to create the Angular components or create it manually.
Metadata
Metadata in Angular components refers to the configuration information that is used to define and configure the behavior of a component. It is specified using decorators, which are functions that add metadata to classes, properties, and methods.
Selector
In Angular, the selector metadata is a crucial property defined within the @Component decorator that specifies how the component can be identified and used in HTML templates. It determines the way the component is rendered in the DOM, allowing developers to create reusable and easily identifiable components.
Template
template metadata is a property defined within the @Component decorator that specifies the HTML template for the component. It allows you to define the structure and layout of the component's view.
Styles
This metadata allows developers to apply CSS styles directly to a component, enhancing its appearance and ensuring that styles are scoped to that particular component.
Standalone
A standalone component is a component that sets standalone: true in its component metadata. Standalone components directly import other components, directives, and pipes used in their templates
Imports
The imports property specifies the standalone component's template dependencies — those directives, components, and pipes that can be used within its template.
Provider
Configure the injector of component with a token that maps to a provider of a dependency.
viewProvider
Defines the set of injectable objects that are visible to its view DOM children.
Encapsulation
An encapsulation policy for the component's styling. Possible values:
changeDetection
The change-detection strategy to use for this component. When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:
Module Architecture
Angular's module architecture uses NgModules to organize applications into cohesive units. These modules group related components, directives, pipes, and services, promoting modular development. Key types include the root module (entry point), feature modules (specific functionality, often lazily loaded), and…
Creating Modules
Creating modules in Angular helps organize your application into manageable, cohesive units. Each module can encapsulate related components, directives, pipes, and services. Here's a detailed guide on how to create and use modules in Angular.
Feature Modules
Feature modules are NgModules for the purpose of organizing code. With feature modules, you can keep code related to a specific functionality or feature separate from other code. Delineating areas of your application helps with collaboration between developers and teams, separating directives, and managing the size…
Lazy Loading Modules
By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not. For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed. Lazy loading helps keep initial…
Dependencies
A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
Stage 3: Communication
Communication
Angular components can communicate with each other using @Input() and @Output() decorators. These decorators facilitate data exchange between parent and child components.
Stage 4: Modules
Modules
Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.
Interpolation
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
Template Statements
Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in () which causes Angular to evaluate the right hand side of…
Stage 5: Understand Binding
Understand Binding
In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync.
Stage 6: Templates
Templates
A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used.
Parent-Child Interaction
In angular parent-child communication is commonly used to share data between two components.
ViewChild
View queries retrieve results from the elements in the component's view — the elements defined in the component's own template.
ContentChild
Content queries retrieve results from the elements in the component's content— the elements nested inside the component in the template where it's used.
Component Lifecycle
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as…
Dynamic Components
In addition to using a component directly in a template, you can also dynamically render components. There are two main ways to dynamically render a component: in a template with NgComponentOutlet, or in your TypeScript code with ViewContainerRef.
Stage 7: Template Syntax
Template Syntax
In Angular, a template is a chunk of HTML. Use special syntax within a template to build on many of Angular's features. Extend the HTML vocabulary of your applications with special Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with…
Stage 8: Pipes
Pipes
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are DatePipe |…
Stage 9: Directives
Directives
SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.
Structural Directives
Structural directives are directives applied to an <ng-template element that conditionally or repeatedly renders the content of that <ng-template. If you just wrap elements in an <ng-template without applying a structural directive, those elements will not be rendered.
Attribute Directives
Change the appearance or behavior of DOM elements and Angular components with attribute directives.
Custom Directives
Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.
Data Binding
In an Angular template, a binding creates a live connection between a part of the UI created from a template (a DOM element, directive, or component) and the model (the component instance to which the template belongs). This connection can be used to synchronize the view with the model, to notify the model when an…
Property Binding
Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets [] which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.
Attribute Binding
Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.
Event Binding
Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
Two-way Binding
Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components. Angular's two-way binding syntax is a combination of square brackets and parentheses, [()], commonly known as banana in a box.
Control Flow
Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.
Template Ref Vars
Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, , to declare a template reference variable.
@Input & @Output
@Input() and @Output() give a child component a way to communicate with its parent component. @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.
Stage 10: Services & Remote Data
Services & Remote Data
Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.
Dependency Injection
Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
@if
The @if block conditionally displays its content when its condition expression is truthy. Content is added and removed from the DOM based on the evaluation of conditional expressions in the @if and @else blocks.
@else
While the @if block can be helpful in many situations, it's common to also show fallback UI when the condition is not met. When you need a fallback, similar to JavaScript's else clause, add an @else block to accomplish the same effect.
Pipes Precedence
The pipe operator has a higher precedence than the JavaScript ternary operator.
@else if
With the new control flow syntax, you gain @else if conditional blocks, something that is not possible with @ngIf. This addition makes the control flow syntax close to what we would write with just plain JavaScript.
Change Detection
Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the…
@for
The @for block repeatedly renders content of a block for each item in a collection.
@switch
The @switch blocks displays content selected by one of the cases matching against the conditional expression. The value of the conditional expression is compared to the case expression using the === operator. @switch does not have fallthrough, so you do not need an equivalent to a break or return statement.
Common Pipes
Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. The following are commonly used built-in pipes for data formatting:
@case
If no @case matches the @switch condition and there is no @default block, nothing is shown. Otherwise, the content inside the @case that matches the condition will be displayed.
@default
The @default clause is used to render a template when none of the @case blocks matches the value of the @switch conditional. @default is optional and can be omitted.
Custom Pipes
Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you…
@let
@let allows you to define a local variable and re-use it across the template.
@defer
A type of block that can be used to defer load the JavaScript for components, directives and pipes used inside a component template.
Configuration
The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router.
Lazy Loading
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app.
Router Outlets
The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted.
Stage 11: Routing
Routing
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.
Stage 12: Forms
Forms
Forms are used to handle user input in many applications, from entering sensitive information to performing data entry tasks.
Reactive Forms
Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl.
Typed Forms
Since Angular 14, reactive forms are strictly typed by default. You don't have to define extra custom types or add a ton of type annotations to your form declarations to benefit from this extra type safety, as Angular will infer types from the default value of a form control. Non-typed forms are still supported. To…
Template-driven Forms
A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application.
Dynamic Forms
Dynamic forms in Angular are a flexible way to create forms where the structure (such as form fields and validation rules) is generated at runtime, rather than being hardcoded. By using Angular's FormBuilder and FormGroup, you can dynamically add, remove, or modify form controls based on user input, data fetched…
Router Links
In Angular, routerLink when applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet locations on the page.
Router Events
The Angular Router raises events when it navigates from one route to another route. It raises several events such as NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are…
Guards
Use route guards to prevent users from navigating to parts of an application without authorization.
Stage 13: HTTP Client
HTTP Client
Most front-end applications need to communicate with a server over the HTTP protocol, to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the HttpClient service class in @angular/common/http.
Setting Up the Client
Before you can use HttpClient in your app, you must configure it using dependency injection. HttpClient is provided using the provideHttpClient helper function, which most apps include in the application providers in app.config.ts. If your app is using NgModule-based bootstrap instead, you can include…
Making Requests
HttpClient has methods corresponding to the different HTTP verbs used to make requests, both to load data and to apply mutations on the server. Each method returns an RxJS Observable which, when subscribed, sends the request and then emits the results when the server responds.
Writing Interceptors
Interceptors are middleware that allows common patterns around retrying, caching, logging, and authentication to be abstracted away from individual requests.
Stage 14: RxJS Basics
RxJS Basics
Reactive Extensions for JavaScript, or RxJS, is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.
Observable Pattern
The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
Observable Lifecycle
An observable is a function that acts as a wrapper for a data stream. They support to pass messages inside your application. An observable is useless until an observer subscribes to it. An observer is an object which consumes the data emitted by the observable. An observer keeps receiving data values from the…
RxJS vs Promises
In a nutshell, the main differences between the Promise and the Observable are as follows:
Operators
RxJS operators are crucial functions that enable the declarative composition of complex asynchronous code. There are two primary types: Pipeable Operators, such as filter() or mergeMap(), which are chained using the observableInstance.pipe() method to transform an existing Observable into a new one without altering…
Filtering
RxJS provides a variety of filtering operators that you can use to filter and transform the data in a stream. You can use these operators in combination with other RxJS operators to create powerful and efficient data processing pipelines.
Rate Limiting
Rate limiting in RxJS refers to the practice of restricting the rate at which events or data can be emitted from an observable. This can be useful in situations where the rate of incoming data is higher than the rate at which it can be processed, or where there are limits on the number of requests that can be made…
Transformation
In RxJS, "transformation" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:
Combination
RxJS combination operators merge multiple observables into a single one using various strategies. Key operators include: Merge (emits items from all sources as they arrive), Concat (emits items from sources sequentially, one after another), Zip (pairs emissions from sources based on index), CombineLatest (emits…
Stage 15: Zones
Zones
Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like setTimeout, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js.
Custom Validators
Custom validators in Angular are functions that allow you to define your own validation logic for form controls. They are used when the built-in validators (like required, minLength, etc.) do not meet your specific validation requirements. A custom validator is a function that returns either null if the form…
Control Value Accessor
Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM. Implement this interface to create a custom form control directive that integrates with Angular forms.
Zoneless Applications
Angular 18 introduced an experimental feature called zoneless change detection. This technology removes the need for Zone.js, a library that was previously used for change detection in Angular from the beginning. By eliminating Zone.js, Angular applications can have faster initial renders, smaller bundle sizes, and…
Stage 16: State Management
State Management
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the…
Stage 17: Signals
Signals
Angular Signals is a system that granularly tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.
Stage 18: Developer Tools
Developer Tools
Angular offers a suite of powerful developer tools designed to streamline and enhance the development process. These include the Angular CLI for efficient project setup and management, the Angular DevTools extension for advanced debugging and profiling, and the Angular Language Service for improved code editing and…
Angular CLI
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command:
DevTools
Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. You can view component trees and change detection cycles.
Local Setup
To install Angular CLI on your local system, you need to install Node.js. Angular requires an active LTS or maintenance LTS version of Node. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser. Once you have Node installed, you can run npm install…
Language Service
The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates (external and in-line). Anytime you open an Angular application for the first time, an installation prompt will occur.
Deployment
The Angular CLI command ng deploy executes the deploy CLI builder associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project with ng add.
Libraries
Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
End-to-End Testing
End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or "end-to-end". E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an…
Using Libraries
Libraries are published as npm packages, usually together with schematics that integrate them with the Angular CLI. To integrate reusable library code into an application, you need to install the package and import the provided functionality in the location you use it. For most published Angular libraries, use the…
Schematics
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
Creating Libraries
If you have developed features that are suitable for reuse, you can create your own libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers. Putting code into a separate library is more complex than simply…
Build Environments
You can define different named build configurations for your project, such as development and production, with different defaults. Each named configuration can have defaults for any of the options that apply to the various builder targets, such as build, serve, and test. The Angular CLI can replace files for each…
Cross-site Scripting
Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Such code can then, for example, steal user and login data, or perform actions that impersonate the user. This has been one of the biggest web security vulnerabilities for over a decade. To systematically block XSS bugs, Angular…
HTTP Vulnerabilities
Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily on the server side, but Angular provides helpers to make integration on the client side easier.
CLI Builders
A number of Angular CLI commands run a complex process on your code, such as building, testing, or serving your application. The commands use an internal tool called Architect to run CLI builders, which invoke another tool (bundler, test runner, server) to accomplish the desired task. Custom builders can perform an…
Sanitization
Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context: A value that's harmless in CSS is potentially dangerous in a URL.
Cross-site Request Forgery
Cross-site request forgery, also known as one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website or web application where unauthorized commands are submitted from a user that the web application trusts. There are many ways in which a malicious website can…
AoT Compilation
Angular applications require a compilation process before they can run in a browser. The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the…
Trusting Safe Values
Sometimes applications genuinely need to include executable code, display an <iframe from some URL, or construct potentially dangerous URLs. To prevent automatic sanitization in these situations, tell Angular that you inspected a value, checked how it was created, and made sure it is secure. Do be careful. If you…
HttpClient CSRF
HttpClient includes a built-in mechanism to prevent XSRF attacks. When making HTTP requests, an interceptor reads a token from a cookie (default name: XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only code running on your domain can read this cookie, the backend can verify that the HTTP request…
Enforce Trusted Types
It is recommended that you use Trusted Types as a way to help secure your applications from cross-site scripting attacks. Trusted Types is a web platform feature that can help you prevent cross-site scripting attacks by enforcing safer coding practices. Trusted Types can also help simplify the auditing of…
XSRF protection
Cross-Site Request Forgery (XSRF or CSRF) protection is a critical security measure designed to prevent a type of malicious exploit where an attacker tricks a web browser into sending an unauthorized request to a trusted site on behalf of a logged-in user. Unlike phishing, which tries to steal credentials, XSRF…
Cross-site Script Inclusion
Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API. The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a <script tag. Angular's HttpClient library recognizes this…
NGXS
Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are…
NgRx
NgRx is a framework for building reactive applications in Angular. NgRx simplifies managing application state by enforcing unidirectional data flow and providing tools like NgRx Store, NgRx Effects, NgRx Router Store, NgRx Signals, NgRx Entity, and NgRx Operators.
RxJS Interop
Angular's @angular/core/rxjs-interop package provides useful utilities to integrate Angular Signals with RxJS Observables. Use a toSignal function to create a signal that tracks the value of an Observable. Use the toObservable utility to create an Observable which tracks the value of a signal.
Inputs as Signals
Signal inputs allow values to be bound from parent components. Those values are exposed using a Signal and can change during the lifecycle of your component. Angular supports two variants of inputs: Optional and Required.
Queries as Signals
A component or directive can define queries that find child elements and read values from their injectors. Developers most commonly use queries to retrieve references to components, directives, DOM elements, and more. There are two categories of query: view queries and content queries.
Model Inputs
Model inputs are a special type of input that enable a component to propagate new values back to another component. Use model inputs in components that exist to modify a value based on user interaction.
Stage 19: SSR
SSR
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance…
Stage 20: SSG
SSG
SSG (Static Site Generator) helps in building the HTML full website during the process of building and serving that HTML page. This method helps to generate the HTML website on the client side before it's served on the server side. Therefore, whenever a user requests a HTML page, the HTML page will be rendered, and…
AnalogJS
AnalogJS is a full-stack meta-framework powered by Vite and Nitro for Angular. Analog supports both Server-Side Rendering (SSR) and Static Site Generation (SSG). Analog uses file-based routing and supports API (server) routes.
Stage 21: Security
Security
This topic describes Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. It doesn't cover application-level security, such as authentication and authorization.
Stage 22: Accessibility
Accessibility
The web is used by a wide variety of people, including those who have visual or motor impairments. A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications. Also, designing an application to be more accessible generally improves the…
Attributes
Building accessible web experience often involves setting Accessible Rich Internet Applications (ARIA) attributes to provide semantic meaning where it might otherwise be missing. Use attribute binding template syntax to control the values of accessibility-related attributes.
UI Components
The Angular Material library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. The Component Development Kit (CDK) includes the a11y package that provides tools to support various areas of accessibility.
Containers
Some Angular Material UI components cannot take children, such as an input, so you need to use container elements to customize the UI component.
Routing
Tracking and controlling focus in a UI is an important consideration in designing for accessibility. When using Angular routing, you should decide where page focus goes upon navigation.
Link Identification
CSS classes applied to active RouterLink elements, such as RouterLinkActive, provide a visual cue to identify the active link. Unfortunately, a visual cue doesn't help blind or visually impaired users. Applying the aria-current attribute to the element can help identify the active link.
Stage 23: Performance
Performance
Angular’s performance is enhanced through key strategies such as Deferable Views for improved initial load times, Image Optimization techniques to reduce loading overhead, and mitigation of Zone Pollution to streamline change detection. Additionally, addressing Slow Computations enhances runtime efficiency, while…
Stage 24: Internationalization
Internationalization
Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. Localization is the process of building versions of your project for different locales.
Localize Package
To take advantage of the localization features of Angular, use the Angular CLI to add the @angular/localize package to your project. If @angular/localize is not installed and you try to build a localized version of your project (for example, while using the i18n attributes in templates), the Angular CLI will…
Locales by ID
Angular uses the Unicode locale identifier (Unicode locale ID) to find the correct locale data for internationalization of text strings. A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A locale ID consists of the language identifier, a hyphen (-) character,…
Translation Files
After you prepare a component for translation, use the extract-i18n Angular CLI command to extract the marked text in the component into a source language file. The marked text includes text marked with i18n, attributes marked with i18n\-attribute, and text tagged with $localize. The extract-i18n command creates a…
Multiple Locales
To deploy an Angular application with multiple locales, follow these steps:
Deferrable Views
Deferrable views can be used in component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a @defer block which specifies the…
Image Optimization
The NgOptimizedImage directive makes it easy to adopt performance best practices for loading images.
Zone Pollution
Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. In some cases, scheduled tasks or microtasks don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are requestAnimationFrame, setTimeout and setInterval.…
Slow Computations
On every change detection cycle, Angular synchronously evaluates all template expressions in components based on their detection strategy and executes the ngDoCheck, ngAfterContentChecked, ngAfterViewChecked, and ngOnChanges lifecycle hooks. To remove slow computations, you can optimize algorithms, cache data with…
Hydration
Hydration is the process that restores the server-side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes. Hydration can be enabled for…
Testing Services
To ensure your services function as expected, you can write dedicated tests for them. Services are typically the easiest files to unit test. You can instantiate the service within a beforeEach block, invoke its methods, and assert the results.
Testing Pipes
An Angular Pipe is a special function that is called from a Component template. Its purpose is to transform a value: You pass a value to the Pipe, the Pipe computes a new value and returns it.
Testing Requests
As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server. The @angular/common/http/testing library provides tools to capture requests made by the application, make assertions about them, and mock the responses to emulate your backend's behavior.
Testing Directives
Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.
Services with Dependencies
When you add a dependency to your service, you must also include it in your tests. For isolated tests, pass an instance of the injectable dependency class into the service’s constructor. Using the inject function can add complexity. Injecting the real service is often impractical because dependent services can be…
Stage 25: Testing
Testing
In any software development process, testing the application plays a vital role. If bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with…
Stage 26: Animation
Animation
Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more.
Transitions & Triggers
In Angular, transition states can be defined explicitly through the state() function, or using the predefined wildcard and void states. An asterisk or wildcard matches any animation state. This is useful for defining transitions that apply regardless of the HTML element's start or end state. Use the void state to…
Complex Sequences
Angular lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page. You can choose to run multiple animations in parallel, or run discrete animations sequentially, one following another.
Reusable Animations
To create a reusable animation, use the animation() function to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your application components using the useAnimation() function.
Route Transitions
When a user navigates from one route to another, the Angular router maps the URL path to a relevant component and displays its view. Animating this route transition can greatly enhance the user experience.
Component Bindings
Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
Debugging Tests
If your tests aren't working as you expect them to, you can inspect and debug them in the browser. Be sure to set breakpoints to track your application's execution.
Component Templates
With a component template , you can save and reuse component processes and properties and create components from them; template-based components inherit the template's properties and process.
Code Coverage
The Angular CLI can run unit tests and create code coverage reports. Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
Questions about the Angular Roadmap
Is the Angular Roadmap free?
Yes. All 158 lessons in this roadmap are free to read on Bibha AI Learning Labs, with no account and no payment. Signing in is optional: it lets you mark lessons as done and keep your progress, and it opens the AI tutor, which runs on your own API key.
How long does the Angular Roadmap take?
There is no fixed duration. It has 158 lessons in 26 stages, and the time it takes depends on how many hours you give it each week. Nothing is locked, so you can skip what you already know, and your progress is saved once you sign in.
Where should I start the Angular Roadmap?
Start with stage 1, Introduction to Angular, and work down in order. The stages are numbered in the order the roadmap suggests, but every lesson is open, so if you already know Introduction to Angular you can go straight to Components or anything after it. Each lesson links to free resources for going deeper.
Can I learn Angular in Hindi?
The lessons are written in English. Once you sign in, you can ask the AI tutor on any lesson to explain it in Hindi or Hinglish. It answers from that lesson’s own text, so the explanation stays on the syllabus. The tutor runs on your own Google, OpenAI or Anthropic key.