Hubbry Logo
Angular (web framework)Angular (web framework)Main
Open search
Angular (web framework)
Community hub
Angular (web framework)
logo
7 pages, 0 posts
0 subscribers
Be the first to start a discussion here.
Be the first to start a discussion here.
Angular (web framework)
Angular (web framework)
Angular (web framework)
View on Wikipedia
from Wikipedia
Angular
DeveloperGoogle
Initial release2.0 / 14 September 2016; 9 years ago (2016-09-14)[1]
Stable release
20.3.4[2] Edit this on Wikidata / 8 October 2025; 12 days ago (8 October 2025)
Preview release
20.0.0 / 28 May 2025; 4 months ago (2025-05-28)[3]
RepositoryAngular Repository
Written inTypeScript, JavaScript
PlatformWeb platform
TypeWeb framework
LicenseMIT License
Websiteangular.dev

Angular (also referred to as Angular 2+)[4] is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.[5] According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.[6]

Differences between Angular and AngularJS

[edit]
Architecture of an Angular application, services, and dependency injection

Google designed Angular as a ground-up rewrite of AngularJS. Unlike AngularJS, Angular does not have a concept of "scope" or controllers; instead, it uses a hierarchy of components as its primary architectural characteristic.[7] Angular has a different expression syntax, focusing on "[ ]" for property binding, and "( )" for event binding.[8] Angular recommends the use of Microsoft's TypeScript language, which introduces features such as static typing, generics, and type annotations.

Features

[edit]

Component-based architecture

[edit]

Angular uses a component-based architecture, which allows developers to build encapsulated, reusable user interface elements. Each component encapsulates its own HTML, CSS, and TypeScript, making it easier to manage and test individual pieces of an application.[9]

Data binding

[edit]

Angular supports two-way data binding which synchronizes data between the model and the view. This ensures that any changes in the view are automatically reflected in the model and vice versa.[10]

Dependency injection

[edit]

Angular has a built-in dependency injection system that makes it easier to manage and inject dependencies into components and services. This promotes modularity and easier testing.[11]

Directives

[edit]

Angular extends HTML with additional attributes called directives. Directives offer functionality to change the behavior or appearance of DOM elements.[12]

Routing

[edit]

Angular includes a router that allows developers to define and manage application states and navigation paths, making it easier to build single-page applications with complex routing.[13]

Angular CLI

[edit]

The Angular CLI (Command Line Interface) provides a set of tools for creating, building, testing, and deploying Angular applications. It enables rapid application setup and simplifies ongoing development tasks.[14]

Server-side rendering

[edit]

Angular has official support for server-side rendering, which improves an application's load time and performance. Server-side rendering also enhances search engine optimization by making content more accessible to web crawlers.[15]

History

[edit]

Angular 2.0 was announced during the keynote of the 2014 NG-Conf conference 16-17 January 2014.[16] On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview.[17] Angular 2 moved to Beta in December 2015,[18] and the first release candidate was published in May 2016.[19] The final version was released on 14 September 2016.

Version 8 of Angular introduced a new compilation and rendering pipeline, Ivy, and version 9 of Angular enabled Ivy by default. Angular 13 removed the deprecated former compiler, View Engine.[20] Angular 14 introduced standalone components and Angular 17 made them the default, de-emphasizing the use of modules.[21]

Angular 18, released in 2024, introduced several improvements such as standalone components defaulting to true, built-in control flow syntax, zoneless support previews, and modern SSR debugging tools.[44]

Naming

[edit]

The rewrite of AngularJS was called "Angular 2", but this led to confusion among developers. To clarify, the team announced that separate names should be used for each framework with "AngularJS" referring to the 1.X versions and "Angular" without the "JS" referring to versions 2 and up.[22]

Version history

[edit]
Version Release date New features
Latest version: Angular 20 May 28, 2025 by default Angular CLI will not generate suffixes for components, directives, services, and pipes.[23]
Supported: Angular 19 November 19, 2024 Angular directives, components and pipes are now standalone by default.[24]
Unsupported: Angular 18 May 22, 2024 Experimental zoneless change detection support and server-side rendering improvements.[25]
Unsupported: Angular 17 November 8, 2023[26] Standalone is now the new default for the CLI (Application builder), without the need for Angular modules (NgModule), a new syntax for control flow and documentation website.[26]
Unsupported: Angular 16 3 May 2023 Partial hydration for Angular Universal server-side rendering, experimental Jest support, and esbuild-based build system for development servers.
Unsupported: Angular 15 November 18, 2022 Standalone APIs, directive composition API.[27]
Unsupported: Angular 14 2 June 2022 Typed forms, standalone components, and new primitives in the Angular CDK (component dev kit).[28]
Unsupported: Angular 13 4 November 2021[29] Removed deprecated View Engine renderer.
Unsupported: Angular 12 12 May 2021[30] Deprecated support for Internet Explorer 11.
Unsupported: Angular 11 11 November 2020[31] Experimental Webpack 5 support
Unsupported: Angular 10 24 June 2020[32] New Date Range Picker (Material UI library).
Unsupported: Angular 9 6 February 2020 Improved build times, enabling AOT on by default
Unsupported: Angular 8 28 May 2019 Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview.[33]
Unsupported: Angular 7 18 October 2018 Updates regarding Application Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects. Support for Content Projection using web standard for custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3 and Node.js 10.[34]
Unsupported: Angular 6 4 May 2018[35] Experimental custom element support, added ng update command
Unsupported: Angular 5 1 November 2017[36] Support for progressive web apps, a build optimizer and improvements related to Material Design.[37]
Unsupported: Angular 4.3 18 July 2017 HttpClient for making HTTP requests, conditionally disabling animations, new router life cycle events for Guards and Resolvers.

Minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for Angular 4.x.x.

Unsupported: Angular 4 23 March 2017[38] Added ngIf and ngFor. Backward compatible with Angular 2.
Unsupported: Angular 2 14 September 2016 Initial release

Future releases

[edit]

Since v9, the Angular team has moved all new applications to use the Ivy compiler and runtime. They will be working on Ivy to improve output bundle sizes and development speeds.[39]

Each version is expected to be backward-compatible with the prior release. The Angular development team has pledged to do twice-a-year upgrades.

Support policy and schedule

[edit]

All the major releases are supported for 18 months. This consists of 6 months of active support, during which regularly scheduled updates and patches are released. It is then followed by 12 months of long-term support (LTS), during which only critical fixes and security patches are released.[40]

Supported Angular Versions
Version Status Released Active Ends LTS Ends Duration
^20.0.0 Active May 28, 2025 Nov 21, 2025 Nov 21, 2026 1.5 years
^19.0.0 LTS Nov 19, 2024 May 19, 2025 May 19, 2026 1.5 years
^18.0.0 LTS May 22, 2024 Nov 19, 2024 Nov 19, 2025 1.5 years

Angular versions v2 to v17 are no longer under support.[41]

Libraries

[edit]

Angular Material

[edit]
"Angular Material" redirects here. For the library of the same name for AngularJS 1.x, see AngularJS § AngularJS Material.

Angular Material is a UI component library that implements Material Design in Angular.[42] It provides a collection of reusable components that adhere to Google's Material Design specifications, aiming to offer a consistent user interface across different devices and platforms.

Angular Material includes a variety of UI components such as buttons, cards, dialogs, grids, and form controls. These components are designed to be customizable and easy to integrate into Angular applications. Additional features of Angular Material include support for responsive design, theming, and accessibility.

Angular Elements

[edit]

In 2018, Angular 6 introduced Angular Elements, enabling developers to package Angular components as custom web elements, which are part of the web components set of web platform APIs.[43][44]

See also

[edit]

References

[edit]
[edit]
Revisions and contributorsEdit on WikipediaRead on Wikipedia

Angular (web framework)

View on Grokipedia
from Grokipedia
Angular is a TypeScript-based, open-source and development platform for building dynamic single-page applications (SPAs) and progressive web apps using , CSS, and . It provides a comprehensive set of tools, libraries, and APIs to streamline development workflows, enabling scalable, high-performance applications that can grow with teams and codebases. Maintained by a dedicated team at , Angular emphasizes component-based architecture, declarative templates, and two-way data binding to simplify the creation of interactive user interfaces. As of early 2025, the latest stable version is Angular 19 (released November 2024). Originally evolving from , a framework launched in 2010 to support rich web experiences through extended syntax, the modern Angular framework was introduced in 2016 as a complete rewrite using for better scalability and maintainability. This shift addressed limitations in , such as performance issues in large applications, by adopting a modular, component-driven design and ahead-of-time (AOT) compilation for faster rendering. Angular's release cycle follows semantic versioning with a semiannual major release schedule in May and November, introducing significant features in major releases while maintaining backward compatibility in minor and patch releases. Key features of Angular include its robust dependency injection system for managing components and services, RxJS integration for , and built-in support for , forms, and HTTP client capabilities. It supports modern web standards like server-side rendering (SSR) for improved SEO and initial load times, as well as (PWA) development for offline functionality. Angular's ecosystem is bolstered by the Angular CLI for rapid scaffolding and testing, along with a thriving global community contributing to its evolution through open-source collaboration on .

Overview

Definition and purpose

Angular is an open-source, TypeScript-based framework maintained by a dedicated team at , designed for building dynamic single-page applications (SPAs). As a comprehensive development platform, it provides tools, APIs, and libraries to streamline the creation of scalable web applications that can grow with team size and codebase complexity. The core purpose of Angular is to facilitate declarative UI construction through HTML templates enhanced with bindings and directives, support two-way data binding for synchronized model-view updates, and promote a modular that organizes into reusable components and services for efficient handling of complex client-side logic. This approach allows developers to focus on application logic while Angular manages rendering and state changes automatically. Angular emphasizes developer productivity and scalability by integrating with modern web standards, including for enhanced and tooling, RxJS for managing asynchronous data streams through observables, and Zone.js for tracking asynchronous operations to trigger efficient without manual intervention. These integrations enable robust, performant applications suitable for enterprise-level demands. Angular evolved from its predecessor as a complete rewrite to better address performance limitations and maintainability issues encountered in large-scale applications.

Relation to AngularJS

Angular, the successor to , represents a complete rewrite of the original framework, shifting from a JavaScript-based system to a platform designed for enhanced scalability and maintainability. (version 1.x) relied on the $scope object for data sharing and controllers for logic, enabling a directive-driven approach to extend . In contrast, Angular (version 2 and later) introduces hierarchical for managing services across the application and emphasizes modularity through NgModules, which organize code into cohesive feature sets. Key architectural differences underscore this evolution, particularly in data binding and component structure. AngularJS employed two-way data binding via $scope, which triggered through a digest cycle that could lead to performance overhead in complex applications. Angular, however, adopts a unidirectional data flow by default, where data passes from components to views via property binding and interpolation, with changes detected efficiently using Zone.js to monkey-patch asynchronous operations. While Angular supports two-way binding through directives like ngModel, its component-centric model replaces AngularJS's directive-based extensions, encapsulating logic, templates, and styles within reusable @Component classes for better encapsulation and reusability. Performance improvements in Angular stem from advanced compilation techniques absent in AngularJS. AngularJS used just-in-time (JIT) compilation at runtime, interpreting templates and dynamically, which increased initial load times. Angular leverages ahead-of-time (AOT) compilation during the build process to generate efficient , reducing bundle size through tree-shaking that eliminates unused , resulting in faster rendering and smaller payloads for production deployments. Upgrading from to Angular presents significant challenges due to the lack of , often necessitating a full rewrite rather than incremental updates. The ngUpgrade library allows hybrid applications to run both frameworks side-by-side during transition, but this approach is temporary and requires careful alignment of modules, components, and services. Large-scale migrations demand refactoring $scope logic into component properties and adapting directives to Angular's syntax, with reaching end-of-life on December 31, 2021, marking the end of official support, though third-party providers like HeroDevs offer extended updates for and compatibility issues.

Core Architecture

Component-based design

Angular components serve as the fundamental building blocks of applications built with the framework, encapsulating elements, logic, and styles into reusable units. Each component is defined by a class decorated with the @Component decorator, which includes metadata specifying the component's selector for embedding in templates, an inline or external template for rendering the view, and optional CSS styles or style files for presentation. For instance, a basic component might use a selector like 'app-hero' to reference it in parent templates, with the template defining the structure and the styles scoped to that element. Components enable hierarchical composition, allowing developers to build complex UIs by nesting child components within parent ones, which promotes and maintainability. Data flows from parent to child components through @Input() properties, where the parent binds values to the child's inputs in its template, such as <child-component [property]="parentValue]">, enabling the child to react to passed data. Conversely, child components communicate events or data back to parents using @Output() decorators paired with EventEmitter, as in @Output() event = new EventEmitter(); followed by this.event.emit(value); in the child, which the parent listens to via (event)="handler($event)". To manage style isolation in this hierarchy, Angular provides three ViewEncapsulation modes: Emulated (default), which emulates shadow DOM by adding unique attributes to prevent style leakage while allowing global styles to influence components; None, which applies styles globally without scoping; and ShadowDom, which leverages native browser Shadow DOM for strict encapsulation. Component lifecycle hooks allow developers to intercept and respond to key stages in a component's existence, ensuring proper initialization, updates, and cleanup. The ngOnInit hook executes once after Angular initializes the component's inputs, ideal for tasks like data fetching or setup that depend on those inputs. ngOnChanges triggers whenever input properties change (before the first ngOnInit and subsequently), providing a SimpleChanges object to detect and handle modifications. Finally, ngOnDestroy runs just before the component is removed from the DOM, facilitating resource cleanup such as unsubscribing from observables to prevent memory leaks. Introduced as a developer preview in Angular version 14, standalone components represent a shift toward simpler application by allowing components to function without reliance on NgModules, directly importing dependencies and enabling easier bootstrapping. This approach, which became the default for new components, directives, and pipes in version 19, enhances tree-shaking by reducing boilerplate and improving bundle sizes through more granular . Components integrate seamlessly with Angular's data binding mechanisms to propagate changes within their templates and hierarchies.

Modules and services

Angular applications are organized into modules using the @NgModule decorator, which configures the and while grouping related components, directives, and . The @NgModule metadata object includes properties such as declarations, which lists the module's components, directives, and belonging to it; imports, which brings in other NgModules or standalone components to make their declarations available; exports, which exposes selected declarations for use by other modules; and providers, which defines injectable services accessible within the module. This structure promotes modularity by encapsulating functionality, with the root module—typically named AppModule—serving as the that bootstraps the entire application and declares top-level elements. In contrast, feature modules are specialized NgModules designed for specific application domains, such as user authentication or , allowing developers to isolate and reuse code blocks while importing shared dependencies from other modules. Services in Angular are classes marked with the @Injectable decorator, enabling them to be injected into components or other services for handling , facilitating data sharing across unrelated components, and managing interactions like HTTP requests through Angular's HttpClient. These services promote by centralizing reusable logic outside of components, which focus primarily on presentation. Regarding instance management, services can be configured as singletons—sharing a single instance throughout the application—or as multi-instance providers, where separate instances are created for different scopes, such as per component. The @Injectable decorator's providedIn property allows fine-grained control over this, with options like 'root' for singleton behavior or specific modules/components for scoped instances. Providers in Angular follow a hierarchical configuration, starting from the root injector, which makes services available application-wide, down to environment or platform injectors, and finally to component-level injectors that can override or extend parent providers. This tree-like structure mirrors the component , ensuring that when a dependency is requested, Angular resolves it by searching upward from the requesting component's injector until it finds a matching provider or reaches the . For tree-shakable singletons, specifying providedIn: 'root' in the @Injectable metadata registers the service at the root level while allowing Angular's to eliminate unused services from the final bundle, optimizing application size and performance. Since Angular version 14, the framework has evolved toward standalone APIs for components, directives, and pipes, which operate independently without requiring NgModule declarations, thereby reducing reliance on modules for code organization. This shift simplifies —eliminating the need for an AppModule in many cases—and enables direct imports of dependencies, fostering a more streamlined and scalable architecture for new applications. While NgModules remain supported for legacy and complex scenarios, the standalone approach is now recommended for its reduced boilerplate and improved build efficiency.

Key Features

Data binding and change detection

Angular employs several data binding mechanisms to synchronize data between the component's code and the template, enabling dynamic updates to the without manual DOM manipulation. These bindings establish one-way or two-way connections, allowing data flow from the component to the view or vice versa, and are fundamental to Angular's declarative template syntax. is the simplest form of data binding, used to embed component data directly into the template as text content. It employs double curly braces, such as {{ expression }}, to evaluate and display the result of a template expression within an . For instance, {{ title }} renders the value of the component's title property. This binding is unidirectional, flowing from the component to the view, and is ideal for displaying computed values or strings. Property binding connects a component property or expression to a specific on a DOM element, component, or directive. The syntax uses square brackets around the target property, like [property]="expression", which sets the element's property to the evaluated expression's value. This differs from by directly updating DOM properties (e.g., [src]="imageUrl" for an <img> element's source) rather than text content, ensuring type-safe and efficient updates. Attribute binding, a variant, targets using [attr.attribute]="expression", useful for static attributes like roles that lack corresponding DOM properties. Event binding captures user interactions or DOM events and executes statements in response. It uses parentheses around the event name, such as (event)="statement", to invoke a component method when the event occurs (e.g., (click)="onClick()"). This one-way binding from the view to the component handles actions like button clicks or input changes, passing event objects if needed for further processing. Two-way binding combines property and event bindings to create a bidirectional data flow, allowing changes in the view to update the component and vice versa. The syntax [(ngModel)]="property" (often requiring the FormsModule import) uses ngModel directive to synchronize form elements, such as <input [(ngModel)]="name">, where typing updates the component's name property, and property changes reflect in the input field. This is particularly useful for form controls but can be extended to custom components with appropriate input and output decorators. A practical example of two-way binding involves select dropdowns bound to an ID from an array of objects. Consider a component with an array colorOptions of type { id: number; label: string }[] and a property selectedColorId: number. In the template:

html

<select [(ngModel)]="selectedColorId"> <option *ngFor="let opt of colorOptions" [ngValue]="opt.id">{{ opt.label }}</option> </select>

<select [(ngModel)]="selectedColorId"> <option *ngFor="let opt of colorOptions" [ngValue]="opt.id">{{ opt.label }}</option> </select>

This setup binds the selected option's ID to selectedColorId, ideal for sending only the ID to the backend. To retrieve and display the selected label, use a method such as:

typescript

getSelectedLabel(): string | undefined { return this.colorOptions.find(opt => opt.id === this.selectedColorId)?.label; }

getSelectedLabel(): string | undefined { return this.colorOptions.find(opt => opt.id === this.selectedColorId)?.label; }

Then interpolate it in the template, e.g., {{ getSelectedLabel() }}. This approach leverages ngModel for two-way binding, *ngFor for iteration, and ngValue for object property binding. Template expressions, used in interpolation, property, and two-way bindings, are JavaScript-like snippets evaluated in the context of the component (e.g., {{ 1 + 1 }} or {{ user.name }}). They must return a value and support operators, method calls, and property access but avoid side effects like assignments or complex logic to ensure predictability. In contrast, event binding statements execute imperative code, such as method invocations or assignments (e.g., (click)="count++"), focusing on actions rather than value computation. This distinction prevents expressions from mutating state unexpectedly during rendering. Angular's change detection mechanism automatically updates the view when data changes, relying on a hierarchical starting from the root component. In the default strategy (ChangeDetectionStrategy.Default), Angular checks every component and its children on each cycle, triggered by events, timers, or asynchronous operations, to compare current and previous values and apply DOM updates if necessary. This ensures the UI remains consistent but can be inefficient in large applications due to full-tree checks. Zone.js powers this process by monkey-patching browser APIs for asynchronous tasks, such as DOM events, HTTP requests, and setTimeout, to notify Angular when potential changes occur. When an async operation completes within a Zone.js-patched context, it schedules a cycle, queuing microtasks to run the efficiently without blocking the main thread. This integration allows Angular to detect changes outside direct component mutations, like third-party library callbacks. For performance optimization, the OnPush strategy (ChangeDetectionStrategy.OnPush) limits checks to components only when their input references change (e.g., via new object instances or primitive value updates) or when explicitly triggered by events within the subtree. Unlike the default strategy's exhaustive traversal, OnPush skips unchanged subtrees, reducing overhead in stable parts of the application, such as lists with immutable data. Developers set this via the changeDetection property in the @Component decorator. Manual control over OnPush components is possible using the ChangeDetectorRef service, which provides methods like detach() to remove a component from automatic detection and reattach() to resume it, or markForCheck() to explicitly queue a check up the tree. This detach/reattach approach is useful for long-running computations or when integrating with external , ensuring checks only occur when needed without full detachment from the cycle. Starting in Angular v17, experiments with zoneless change detection aim to eliminate Zone.js dependency, reducing bundle size and runtime overhead by directly integrating with browser APIs for notifications. This approach triggers detection via explicit signals or event marks rather than global monkey-patching, improving startup time and while maintaining compatibility through opt-in configurations like provideZonelessChangeDetection(). Introduced experimentally in Angular v17, zoneless became stable in Angular 20, providing a more granular and efficient reactivity model.

Signals and reactivity

Angular signals provide a fine-grained reactivity system that tracks state changes and notifies consumers when values update, optimizing rendering and change detection by focusing updates only on affected parts of the application. Introduced as a stable feature in Angular v16, signals wrap values and enable efficient dependency tracking between producers (signals that hold state) and consumers (such as templates, computed signals, or effects that read them). This mechanism enhances traditional data binding and change detection by reducing unnecessary checks, particularly in OnPush components where reading a signal in a template marks the component for updates only when the signal changes. Signals are created using the signal function with an initial value, functioning as getter methods that allow Angular to track their usage in reactive contexts. For example:

typescript

import { signal } from '@angular/core'; const count = signal(0); console.log(count()); // Outputs: 0

import { signal } from '@angular/core'; const count = signal(0); console.log(count()); // Outputs: 0

Writable signals can be updated via .set(value) for direct assignment or .update(fn) to compute new values based on the previous one:

typescript

count.set(3); // Sets to 3 count.update(value => value + 1); // Increments to 4

count.set(3); // Sets to 3 count.update(value => value + 1); // Increments to 4

Computed signals, created with the computed function, derive values from other signals and are lazily evaluated and memoized for performance:

typescript

const doubleCount = computed(() => count() * 2); console.log(doubleCount()); // Outputs: 8 (after update)

const doubleCount = computed(() => count() * 2); console.log(doubleCount()); // Outputs: 8 (after update)

Effects, using the effect function, execute side effects when tracked signals change, re-running automatically on updates:

typescript

import { effect } from '@angular/core'; effect(() => { console.log(`Count is: ${count()}`); });

import { effect } from '@angular/core'; effect(() => { console.log(`Count is: ${count()}`); });

Read-only signals can be derived from writable ones using .asReadonly(), preventing direct modifications while propagating changes. Signals integrate seamlessly with Angular's ecosystem, including templates and dependency injection, and are positioned as essential primitives for modern development rather than advanced features, with basic usage covered in the framework's essentials documentation.

Dependency injection

Angular's dependency injection (DI) system is a built-in (IoC) mechanism that facilitates the creation, management, and provision of dependencies across the application, allowing components and services to declare their needs without directly instantiating them. The DI container, known as the , resolves and delivers these dependencies automatically, promoting by externalizing object creation to the framework. Services are marked as injectable using the @Injectable() decorator, and dependencies are typically injected via constructor parameters, though the inject() function provides an alternative for functional injection in modern Angular applications. Dependencies are identified by tokens, which can be classes (e.g., HeroService), strings (e.g., 'apiUrl'), or custom InjectionToken instances for abstract or non-class values like configuration objects. The operates hierarchically, with providers scoped at multiple levels to control instance lifecycle and visibility: the level (via providedIn: '[root](/page/Root)' in @Injectable() or the application bootstrap configuration) creates singleton instances available application-wide; environment level (through the ApplicationConfig.providers array) supports global but configurable provisions; and component or element level (via @Component.providers or viewProviders) generates isolated instances for a component and its view hierarchy, enabling tree-shaking and lazy-loading compatibility. When resolving a dependency, Angular traverses the starting from the requesting component's element upward to the environment and injectors until a match is found, ensuring efficient reuse of shared instances while allowing overrides in child scopes. Providers can be customized using various strategies in the providers array: useClass instantiates a specific class (e.g., { provide: LoggingService, useClass: BetterLoggingService } for subclassing or overrides); useValue supplies a literal value (e.g., { provide: API_URL, useValue: 'https://api.example.com' } for constants); useFactory invokes a function to generate the dependency dynamically, often with additional injections (e.g., a factory using HttpClient for runtime configuration); and useExisting aliases one token to another existing provider for mapping without new instances. These options allow fine-grained control, such as creating multiple instances for the same token by setting multi: true, which is particularly useful for extensible patterns like HTTP interceptors. To address common challenges, Angular provides modifiers like forwardRef, which resolves circular dependencies by deferring token resolution (e.g., { provide: OtherService, useFactory: forwardRef(() => OtherService) }), and Optional, which makes injection non-mandatory, returning null if the dependency is unavailable without throwing errors (e.g., @Optional() private logger?: LoggerService). Additional modifiers include self to restrict resolution to the current injector and skipSelf to bypass it in favor of parent injectors, further refining hierarchical behavior. This DI system enhances testability by enabling easy substitution of mocks or stubs in unit tests (e.g., providing test doubles via TestBed.configureTestingModule), fosters through encapsulated dependencies that simplify refactoring, and supports lazy-loading by allowing services to be loaded on demand without global pollution.

Directives and pipes

Directives in Angular are classes that add additional behavior to elements in templates, enabling developers to extend HTML functionality without altering the underlying DOM structure directly. They are defined using the @Directive decorator from the @angular/core module, which provides metadata such as the selector for applying the directive to elements. Angular categorizes directives into structural and attribute types, each serving distinct purposes in template manipulation. Structural directives manipulate the DOM layout by adding, removing, or replacing elements based on data conditions, typically prefixed with an asterisk (*) in templates. Built-in examples include *ngIf, which conditionally renders an element or template only if its expression evaluates to true, and *ngFor, which iterates over a collection to repeat elements for each item. These directives work by wrapping content in an <ng-template> element and using TemplateRef and ViewContainerRef to control rendering. Custom structural directives can be created by implementing logic to attach or detach views dynamically, often using the @Input decorator to receive expressions from the template. Attribute directives, in contrast, modify the appearance or behavior of existing DOM elements, hosts, or components without altering the structure. Common built-in attribute directives are ngClass, which dynamically adds or removes CSS classes based on an expression, and ngStyle, which sets inline styles on the host element. For custom attribute directives, developers use HostBinding to bind properties like styles or classes directly to the host element and HostListener to respond to events such as mouseenter or click. To safely access and manipulate the DOM, especially in server-side rendering scenarios, the Renderer2 service is employed instead of direct element references, ensuring platform-agnostic behavior. An example is a highlight directive that changes the background color on hover:

typescript

import { Directive, ElementRef, HostListener, HostBinding, Input, Renderer2 } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input() highlightColor: string = 'yellow'; constructor(private el: ElementRef, private renderer: Renderer2) {} @HostListener('mouseenter') onMouseEnter() { this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor); } @HostListener('mouseleave') onMouseLeave() { this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent'); } }

import { Directive, ElementRef, HostListener, HostBinding, Input, Renderer2 } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input() highlightColor: string = 'yellow'; constructor(private el: ElementRef, private renderer: Renderer2) {} @HostListener('mouseenter') onMouseEnter() { this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', this.highlightColor); } @HostListener('mouseleave') onMouseLeave() { this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent'); } }

This directive applies the appHighlight selector to elements, using Renderer2 for style updates. provide a way to transform data declaratively within templates using the pipe operator (|), allowing for reusable formatting without embedding logic in components. They are implemented as classes decorated with @Pipe from @angular/core, requiring the PipeTransform interface with a transform method that processes input values and optional parameters. can be pure (default), which execute only when input changes to optimize performance, or impure (set via pure: false), which run during every cycle for dynamic data like arrays. Starting with Angular v17, can be created as standalone, eliminating the need for NgModule declarations and simplifying . Angular includes several built-in pipes for common transformations, such as DatePipe for formatting dates according to locale rules (e.g., {{ today | date:'short' }} outputs "11/8/25, 2:00 PM") and CurrencyPipe for displaying monetary values with symbols and decimals. The AsyncPipe stands out for handling asynchronous data, automatically subscribing to or Promises in templates and unsubscribing on destruction, thus avoiding manual subscription management in components. For instance, {{ user$ | async }} renders the latest emission from an without explicit .subscribe(). Custom pipes extend this functionality for domain-specific needs, such as a KebabCasePipe that converts strings to kebab-case:

typescript

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'kebabCase', standalone: true // For v17+ }) export class KebabCasePipe implements PipeTransform { transform(value: string): string { return value.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); } }

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'kebabCase', standalone: true // For v17+ }) export class KebabCasePipe implements PipeTransform { transform(value: string): string { return value.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); } }

Usage in a template: {{ 'camelCase' | kebabCase }} yields "camel-case". Built-in pipes cover standard formatting, while custom ones allow tailored transformations, with standalone support in v17+ enhancing modularity.

Development Tools and Patterns

Angular CLI

The Angular CLI is a tool that facilitates the , development, testing, building, and maintenance of Angular applications. It is distributed as the @angular/cli package on and provides the ng executable for running commands. Installation of the Angular CLI requires (version 20.19.0 or later) and , after which it can be installed globally using the command npm install -g @angular/cli. Once installed, the CLI enables quick project initialization with ng new <project-name>, which creates a new workspace and generates a basic Angular application structure, including source files, configuration, and dependencies. For code generation, the ng generate command (or alias ng g) automates the creation of common artifacts; for example, ng g component my-component produces a new component with its class, HTML template, CSS styles, and spec file, while ng g service my-service creates an injectable service class. Development workflows are supported by ng serve, which compiles the application and starts a local server (defaulting to http://:4200) with live reloading for rapid iteration. Building for production uses ng build, which outputs optimized files to the dist/ directory by default, and testing is handled via ng test, which executes unit tests using and Karma in a browser environment. Schematics form the foundation of the CLI's code generation capabilities, serving as reusable templates that define rules for creating or modifying files and project structures. Built-in schematics power commands like ng generate, but the system is extensible through custom schematics, allowing developers to create plugins for project-specific patterns, such as generating elements or integrating third-party libraries. Configuration for schematics and other CLI behaviors is managed in the angular.json file at the workspace root, which specifies project targets (e.g., build, serve), options like output paths and budgets, and collections of schematic plugins via the schematics property. Key features of the Angular CLI include support for lazy-loading through generated routing modules, where ng generate module can create feature modules configured for route-based lazy loading to improve initial load times. Ahead-of-time (AOT) compilation is enabled by default in production builds or explicitly via the --aot flag in ng build, compiling templates and components at build time for better performance and security. (i18n) is integrated via commands like ng extract-i18n, which pulls marked strings from templates into translation files, and build options in angular.json to localize outputs for multiple locales. Starting with Angular version 17, the CLI adopted esbuild and Vite for the development server and builds, resulting in significantly faster compilation times—up to 10x quicker for large projects—while maintaining compatibility with existing workflows. In , experimental integration with Vitest was introduced for testing, offering watch mode and browser-based execution as an alternative to Karma, configurable via ng test --vitest.

Routing and navigation

Angular's routing system, provided by the @angular/router library, enables client-side navigation in single-page applications (SPAs) by mapping URLs to specific components without full page reloads. This router is a core part of the framework and is included by default in projects generated by Angular CLI. It facilitates seamless transitions between views, supporting features like parameterized routes and to optimize performance. The primary building blocks of Angular routing include the RouterModule, RouterOutlet, and RouterLink directive. RouterModule is an NgModule that configures routes via an array of route objects, imported into the application's module to enable features such as navigation and manipulation. RouterOutlet serves as a directive and container in templates where routed components are dynamically rendered based on the current . For navigation, RouterLink is used in templates to create clickable links that trigger route changes programmatically, such as <a routerLink="/users">Users</a>, avoiding traditional anchor tag reloads. Route configuration in Angular defines how URLs map to components through an array of objects in RouterModule.forRoot(routes). Paths can use exact matching (e.g., path: 'home') or prefix matching, with dynamic parameters captured via colons like path: 'user/:id' to handle variable segments such as user IDs. Wildcard routes employ path: '**' to catch unmatched URLs, often directing to error or 404 pages. For performance, defers module bundles until needed using loadChildren: () => import('./feature.module').then(m => m.FeatureModule), reducing initial load times. To control access and data flow, Angular provides route guards as functions that intercept navigation. CanActivate guards determine if a route can be activated, typically for checks—returning true allows entry, while false or a redirect blocks it, such as verifying user login before accessing protected areas. CanDeactivate guards assess if a user can exit a route, useful for confirming unsaved changes in forms by prompting the user. The Resolve guard pre-fetches data before activation, injecting resolved values into components via the ActivatedRoute, ensuring data availability without additional HTTP calls in the component lifecycle. These guards integrate with the component-based architecture to enforce security and usability patterns. URL handling in Angular routing is managed by the LocationStrategy service, which abstracts browser interactions. The default PathLocationStrategy uses the HTML5 History API for clean, server-like URLs (e.g., example.com/users/1), requiring server configuration to redirect non-root paths to the index.html for SPA support. Alternatively, HashLocationStrategy appends routes to the URL hash (e.g., example.com/#/users/1), bypassing server needs but resulting in less SEO-friendly URLs; it is configured via useHash: true in router options for legacy or simple deployments.

Advanced Capabilities

Forms and validation

Angular provides two primary approaches for building forms: template-driven forms and reactive forms. Template-driven forms rely on directives in the HTML template to handle form data and validation, making them suitable for simpler scenarios such as basic user input collection. In contrast, reactive forms offer a programmatic model in the component class, providing greater control and scalability for complex form logic. Both approaches integrate with Angular's data binding mechanisms to synchronize form elements with the underlying model. Template-driven forms utilize the ngModel directive for two-way data binding between the template and component properties, allowing automatic form value updates. The ngForm directive wraps the form to track its overall state and aggregate child controls. Validation is achieved through built-in directives like required for mandatory fields and pattern for regex-based input matching, applied directly as HTML attributes. For instance, a basic email input might be defined as <input type="email" name="email" ngModel required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">, where Angular automatically adds CSS classes like ng-valid or ng-invalid based on validation status. Reactive forms, imported from the @angular/forms module, center on classes such as FormControl for individual inputs, FormGroup for grouping related controls, and FormArray for dynamic arrays of controls. A FormControl is instantiated with an initial value and validators, as in email = new FormControl('', [Validators.required, Validators.email]);, enabling explicit management of form state in the component. Custom validators can be created as functions returning ValidationErrors or null, while FormGroup combines controls like profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl('') });. This model-driven approach facilitates and handling of asynchronous operations. Validation in Angular encompasses built-in validators such as Validators.minLength for string length checks and Validators.email for email format verification, applicable in both form types. Async validators, implemented as functions returning a Promise or Observable, perform server-side checks like username availability after synchronous validation completes, marking the form as pending during execution. Errors are typically displayed conditionally using *ngIf directives, for example: <div *ngIf="email.invalid && email.touched" class="error">Email is required.</div>, or by leveraging form control status changes for dynamic UI feedback. Cross-field validation, such as ensuring matching passwords, is handled via custom validators on the FormGroup. Starting with Angular 14, strictly typed reactive forms enhance integration by inferring types for form controls and groups, preventing runtime errors from invalid property access. For example, a typed FormControl<string> ensures control.value is treated as string | null, while FormGroup<{name: FormControl<string>, email: FormControl<string>}> enforces key-specific typing. This feature, enabled by default, improves developer productivity through better IDE support and compile-time checks without altering the core API.

Server-side rendering

Angular provides built-in support for server-side rendering (SSR) through its core framework, building on the Angular Universal technology, primarily targeting environments via the @angular/platform-server package. This allows the server to pre-render Angular components into static , which is then sent to the client for hydration, where the client-side takes over to make the page interactive. A key component, TransferState, facilitates the transfer of server-rendered data and state to the browser, preventing duplicate calls and ensuring seamless hydration without re-rendering content. Setting up SSR involves adding it to an existing Angular project using the Angular CLI command ng add @angular/ssr, which configures the necessary files including server module and rendering setup. Developers configure the server to render the Angular app on incoming HTTP requests, often using to serve the pre-rendered HTML. For static site generation (), the CLI supports building pages ahead of time, which can be deployed to CDNs for even faster delivery. The primary benefits of SSR with Angular include faster time to first paint, as users receive fully rendered immediately rather than waiting for client-side to load and execute, and improved (SEO), since search engine crawlers can access the complete page content without relying on execution. However, challenges arise from the server environment lacking browser-specific APIs like document or window, necessitating polyfills such as Domino or conditional checks to provide fallbacks during rendering. Hydration in Angular occurs when the client-side app bootstraps and attaches event listeners to the server-rendered DOM, enabling interactivity; starting with Angular v18, the framework supports partial hydration via non-destructive techniques, allowing selective hydration of page parts for performance; this has been refined with stable incremental hydration in v19 and later.

Ecosystem

Angular Material

Angular Material is the official UI component library for Angular applications, implementing Google's specification to provide a consistent, accessible, and visually appealing user interface. It is distributed via the @angular/material package and includes a wide array of pre-built components such as buttons, cards, dialogs, input fields, lists, menus, tables, and navigation elements like side navigation and toolbars. These components are designed to work seamlessly within Angular's architecture, promoting rapid development of responsive web applications while adhering to standards (a11y) and best practices. Installation of Angular Material is facilitated through the Angular CLI using the command ng add @angular/material, which automatically adds the necessary dependencies, configures the project for theming, and imports required modules. This process also installs the Angular Component Dev Kit (CDK), a foundational library that provides unstyled behavioral primitives such as drag-and-drop functionality, overlay services for modals and tooltips, accessibility utilities, and layout observers for responsive design. The CDK enables developers to build custom components with common interaction patterns without prescriptive styling, serving as the underlying infrastructure for Angular Material's styled components. Key features of Angular Material include its emphasis on responsive design, achieved through the CDK's BreakpointObserver, which allows components to adapt to different screen sizes using predefined media query breakpoints. Customization is handled via Sass APIs, enabling developers to define global themes by mixing color palettes, typography, and density scales—such as the predefined indigo-pink theme or fully custom configurations. Starting with version 15, Angular Material migrated to Material Design Components (MDC) for Web, introducing improved performance, better theming flexibility with CSS custom properties, and enhanced component APIs while maintaining backward compatibility through migration schematics. In usage, Angular Material components integrate directly with Angular's core features, such as forms for validation in inputs and selects, and for drawers or tabs, ensuring a unified UI across the application. For example, a mat-form-field can wrap form controls with automatic styling and error handling, while mat-dialog leverages the CDK overlay for modal interactions. This integration supports building scalable, maintainable interfaces without additional boilerplate.

Angular Elements

Angular Elements is a feature of the Angular framework that enables developers to package Angular components as custom elements, also known as , which are a web standard for extending with reusable, framework-agnostic elements. This allows Angular components to be embedded directly into any web application, including those built with other frameworks or vanilla , without requiring the host application to adopt Angular. By leveraging the Custom Elements API, Angular Elements automatically handle bootstrapping, change detection, and data binding when the custom element is inserted into the DOM. To incorporate Angular Elements into an Angular project, developers can install the @angular/elements package using the Angular CLI command ng add @angular/elements, which also configures necessary polyfills for browser compatibility, or via npm install @angular/elements --save. Once installed, the createCustomElement() function from @angular/elements is used to convert an Angular component into a custom element constructor. For instance, a component class is passed to createCustomElement() along with an optional configuration object, producing an NgElementConstructor that extends the native HTMLElement. This constructor is then registered globally using customElements.define(tagName, constructor), where tagName specifies the custom HTML tag (e.g., <my-component>). Inputs defined in the Angular component are automatically mapped to on the custom element, enabling attribute-based configuration, while outputs can be handled via standard DOM events. The primary benefits of Angular Elements include seamless integration into non-Angular environments, such as React applications or plain / pages, allowing teams to reuse Angular-built UI logic without imposing Angular's full runtime on the host app. Polyfills provided by the package ensure support for older browsers that lack native Custom Elements v1 implementation, broadening deployment options. This approach promotes , as Angular components can be distributed as lightweight bundles (e.g., via or direct script inclusion) and function independently once registered. Configuration of Angular Elements involves standard Web Component practices, such as using the Document interface's customElements registry for definition and relying on observed attributes for input binding—Angular automatically observes changes to these attributes and updates the component's @Input() properties accordingly. For more advanced setups, the NgElementConfig can customize handling or entry components, though the default setup bootstraps the element in an isolated Angular zone to manage reactivity. Despite these advantages, Angular Elements operate in a limited scope without access to the host application's full Angular context, such as shared services, modules, or dependency injection tree, requiring self-contained components that bundle all necessary dependencies. This isolation can complicate scenarios needing tight integration with the parent app's state. With Angular v17's shift to standalone components as the default authoring model—eliminating the need for NgModules—support for creating Elements has improved, enabling simpler, module-free definitions and better alignment with modern Angular patterns for lighter bundles and easier maintenance.

Community libraries

The Angular ecosystem benefits from a vibrant community of third-party libraries that extend its core functionality, addressing common development needs such as , testing, , and performance optimization. These libraries are selected based on metrics like npm weekly downloads, GitHub stars, active maintenance, and compatibility with recent Angular versions, including v16 and later, with signals stabilized in v17 for enhanced reactivity. In , NgRx stands out as a reactive library inspired by Redux, providing a predictable way to handle application state using actions, reducers, and effects integrated with RxJS. It has garnered over 669,000 weekly downloads for its core @ngrx/store package and supports Angular's signals in version 18+, enabling finer-grained reactivity without full store rewrites. Akita offers a lighter alternative, emphasizing entity-based stores and RxJS observables for simpler setup in medium-sized apps, with around 35,000 weekly downloads; however, the project was archived in May 2025 and is no longer actively maintained. For testing, integrations with Jest and are widely adopted for unit and end-to-end scenarios, respectively. Jest, configured via jest-preset-angular, supports Angular's component testing with over 159 million total downloads, allowing fast, isolated execution of specs alongside Angular's built-in tools. provides browser-based E2E testing with Angular-specific component testing introduced in version 10.5, praised for its developer-friendly debugging and automatic waits, making it a preferred choice for integration tests in production apps. Internationalization efforts often leverage ngx-translate, a runtime translation library that loads files dynamically and integrates seamlessly with Angular's HttpClient. With more than 163 million total downloads, it remains actively maintained up to version 17.0.0 as of July 2025, including support for Angular's signals to handle reactive locale changes efficiently. Performance enhancements, particularly for Progressive Web Apps (PWAs), include libraries like ngx-pwa, which builds on Angular's service worker to manage offline caching and local storage. Though its offline module was deprecated post-Angular 13, the local-storage component continues to receive updates for v18+ compatibility, offering asynchronous, -aware storage with low overhead for PWA state persistence. RxJS extensions, such as custom operators in these libraries, further optimize reactive patterns by aligning with Angular's signals for reduced bundle sizes and better .

History and Evolution

Origins and naming

Angular, the modern , traces its origins to , an earlier JavaScript-based framework developed at . was created by Miško Hevery as a side project in 2009 to address the complexities of building dynamic web applications, with its first stable release occurring in October 2010. The framework was initially open-sourced under the Apache License 2.0, enabling widespread adoption by developers seeking a structured approach to single-page applications. Key contributors included Miško Hevery, the primary creator, and Igor Minar, who served as a lead engineer on the project and emphasized practices. As AngularJS matured, its core mechanisms revealed limitations in handling large-scale applications. The digest cycle, responsible for detecting and propagating changes across the scope, often led to bottlenecks due to its bidirectional data binding and frequent evaluations, making challenging for complex UIs. These issues prompted the team to initiate a ground-up rewrite in 2014, aiming to introduce a more efficient architecture while leveraging emerging technologies like for better and maintainability. The rewritten framework was released as Angular 2 in September 2016, marking a significant departure from its predecessor. To reflect this evolution and the shift away from pure toward a TypeScript-centric platform, the naming convention changed: AngularJS retained the "JS" suffix for version 1.x, while subsequent versions simply adopted "Angular" to signify a broader, platform-agnostic evolution beyond JavaScript-specific constraints. This rebranding, advocated by leads like Igor Minar, underscored the framework's transformation into a comprehensive development platform. Notably, version 3 was skipped to align the framework's versioning with the Angular CLI, which had already reached version 3.

Version history

Angular's version history begins with its major rewrite in version 2, released on , 2016, which introduced ahead-of-time (AOT) compilation as a precursor to the later Ivy renderer and laid the foundation for the HttpClient module's development, though the module itself was fully introduced in a subsequent minor release. Version 4, released on March 23, 2017, brought the dedicated animations module for smoother UI transitions and officially launched HttpClient as a replacement for the older Http service, improving API interactions with better support and interceptors. Subsequent releases focused on tooling and performance enhancements. Angular 6, released on May 4, 2018, aligned the Angular CLI more closely with the core framework, adding features like library support and Ivy as an experimental renderer. Version 7, on October 18, 2018, improved CLI workflows with virtual scrolling and drag-and-drop CDK components, while version 8, released on May 28, 2019, made Ivy opt-in for better bundle sizes and introduced differential loading to serve modern and legacy JavaScript bundles separately for optimized loading. Angular 9, released on February 6, 2020, set Ivy as the default renderer, resulting in faster builds and smaller production bundles without requiring manual updates in most cases. From versions 12 to 15, released between May 2021 and November 2022, the framework emphasized and : version 12 introduced stricter template type checking, version 14 previewed standalone components to reduce NgModule boilerplate, and later versions in this range refined these with better tree-shaking and hydration improvements. Version 16, released on May 3, 2023, introduced signals for fine-grained reactivity, enabling more efficient as an alternative to the traditional Zone.js-based system. Building on this, Angular 17, released on November 8, 2023, made standalone components the default for new projects via the CLI, added deferrable views for lazy-loading content, and advanced zoneless experiments. Version 18, on May 22, 2024, stabilized further zoneless capabilities with signal-based APIs and enhanced server-side rendering . Angular 19, released on November 19, 2024, focused on server-side rendering advancements like incremental hydration and route-level configuration, alongside stabilizing signal APIs for broader reactivity use. Version 20, released on May 28, 2025, removed component file suffixes (like .component.ts) by default in the official style guide for cleaner project structures, while making zoneless stable with improved error handling and SSR integration. The latest major release, version 21 on November 19, 2025, introduced experimental signal forms for reactive form management, Angular Aria in developer preview for accessible UI components, a stable MCP server for AI-assisted development, Vitest as the default test runner replacing Karma, and zoneless change detection as the default, removing Zone.js dependency for improved performance.
VersionRelease DateKey Features
2September 14, 2016AOT compilation (Ivy precursor), component-based rewrite
4March 23, 2017Animations module, HttpClient introduction
6–8May 2018–May 2019CLI enhancements, Ivy opt-in (v8), differential loading (v8)
9February 6, 2020Ivy as default renderer
12–15May 2021–November 2022Strict (v12), standalone components preview (v14)
16May 3, 2023Signals for reactivity
17–20November 2023–May 2025Standalone default (v17), deferrable views (v17), zoneless stable (v20), no suffixes default (v20)
21November 19, 2025Signal forms (experimental), Angular Aria (preview), Vitest default, zoneless by default
Breaking changes across versions are managed through the Angular CLI's ng update command, which automates migrations and provides detailed guides for deprecated APIs, ensuring smoother upgrades; for instance, Ivy adoption in v9 included automatic migrations for most template expressions.

Support policy and future roadmap

Angular maintains a structured support policy aligned with semantic versioning, where major releases introduce significant features, minor releases provide backward-compatible enhancements, and patch releases address bugs. All major versions receive 6 months of active support—during which new features, bug fixes, and updates are provided—followed by 12 months of maintenance support limited to critical and fixes. No long-term support (LTS) versions are currently designated beyond active support for recent majors. This policy ensures stability for production applications while encouraging upgrades to leverage ongoing innovations. The release cadence supports this framework with semiannual major releases in May and November, allowing developers to plan updates predictably. As of early 2025, the latest stable version was Angular 19 (released November 2024). Planned or expected major versions include:
  • Angular 20: May 2025
  • Angular 21: November 2025
  • Angular 22: May 2026
  • Angular 23: November 2026
These are based on the standard release cadence; exact dates and features are confirmed on official channels closer to release. For instance, Angular 21, released in November 2025, is currently in active support, with its active phase extending approximately through May 2026 and maintenance until May 2027, though exact end dates may adjust based on release timing. Deprecated features remain supported under the applicable timeline until removal, with migration tools provided to ease transitions. Looking ahead to 2025 and beyond, Angular's roadmap emphasizes performance and developer experience enhancements, including explorations into zoneless to reduce overhead in reactivity, incremental hydration for faster server-side rendering initialization, the linked signal for more efficient , and withEventReplay for improved event handling in signals. Additional priorities include advancing signal-based forms toward default status, evolving accessibility primitives, and integrating AI-driven tooling to streamline development workflows, all informed by the 2024 developer survey with over 10,000 responses. These features are in prototyping stages, with developer previews anticipated in upcoming releases. The Angular team fosters community involvement through a request-for-comments (RFC) process on , enabling feedback on proposals like selectorless components to address import redundancies. Deprecation warnings are issued well in advance—for example, the deprecation of the Karma test runner in favor of modern alternatives like Web Test Runner or Vitest—to support smooth migrations without disrupting existing projects. This collaborative approach ensures the roadmap aligns with real-world needs while upholding the framework's commitment to .

References

  1. https://angular.dev/overview
  2. https://github.com/angular/angular
  3. https://angular.dev/reference/releases
  4. https://blog.angular.dev/announcing-angular-dev-1e1205fa3039
  5. https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe
  6. https://angular.dev/guide/templates
  7. https://angular.io/guide/architecture
  8. https://angular.dev/reference/versions
  9. https://angular.io/guide/upgrade
  10. https://blog.angular.io/finding-a-path-forward-with-angularjs-7e186fdd4429
  11. https://angular.io/guide/aot-compiler
  12. https://blog.angular.dev/discontinued-long-term-support-for-angularjs-cc066b82e65a
  13. https://angular.dev/guide/components
  14. https://angular.dev/essentials/components
  15. https://angular.dev/guide/components/inputs
  16. https://angular.dev/guide/components/outputs
  17. https://angular.dev/guide/components/styling
  18. https://angular.dev/guide/components/lifecycle
  19. https://blog.angular.dev/the-future-is-standalone-475d7edbc706
  20. https://angular.dev/guide/ngmodules
  21. https://angular.dev/guide/services
  22. https://angular.dev/guide/di/hierarchy
  23. https://angular.dev/guide/standalone
  24. https://angular.dev/guide/templates/binding
  25. https://angular.dev/guide/templates/event-listeners
  26. https://angular.dev/guide/templates/two-way-binding
  27. https://angular.dev/guide/forms/template-driven-forms
  28. https://angular.dev/api/forms/NgSelectOption
  29. https://angular.dev/best-practices/runtime-performance
  30. https://angular.dev/best-practices/skipping-subtrees
  31. https://angular.dev/guide/zoneless
  32. https://angular.dev/guide/signals
  33. https://angular.dev/essentials/signals
  34. https://angular.dev/guide/di
  35. https://angular.dev/guide/di/creating-and-using-services
  36. https://angular.dev/guide/di/defining-dependency-providers
  37. https://angular.dev/guide/di/hierarchical-dependency-injection
  38. https://angular.dev/api/core/Directive
  39. https://angular.dev/guide/directives
  40. https://angular.dev/guide/directives/structural-directives
  41. https://angular.dev/guide/directives/attribute-directives
  42. https://angular.dev/api/core/Pipe
  43. https://blog.angular.dev/introducing-angular-v17-4d7033312e4b
  44. https://angular.dev/guide/templates/pipes
  45. https://angular.dev/api/common/AsyncPipe
  46. https://angular.dev/tools/cli
  47. https://angular.dev/installation
  48. https://angular.dev/cli/new
  49. https://angular.dev/cli/build
  50. https://angular.dev/reference/configs/workspace-config
  51. https://angular.dev/guide/i18n
  52. https://angular.dev/cli/extract-i18n
  53. https://angular.dev/roadmap
  54. https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301
  55. https://angular.dev/guide/routing
  56. https://angular.dev/guide/routing/route-guards
  57. https://angular.dev/guide/routing/common-router-tasks
  58. https://angular.dev/guide/forms
  59. https://angular.dev/guide/forms/form-validation
  60. https://angular.dev/guide/forms/reactive-forms
  61. https://angular.dev/guide/forms/typed-forms
  62. https://angular.dev/guide/ssr
  63. https://angular.dev/guide/ssr#configuring-a-server
  64. https://material.angular.dev/
  65. https://material.angular.dev/components/categories
  66. https://material.angular.dev/guide/getting-started
  67. https://material.angular.dev/cdk/categories
  68. https://material.angular.dev/cdk/layout/overview
  69. https://material.angular.dev/guide/theming
  70. https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8
  71. https://material.angular.dev/components/form-field/overview
  72. https://angular.dev/guide/elements
  73. https://angular.dev/api/elements/createCustomElement
  74. https://www.angulararchitects.io/en/aktuelles/your-options-for-building-angular-elements/
  75. https://github.com/datorama/akita
  76. https://www.npmjs.com/package/jest-preset-angular
  77. https://www.cypress.io/blog/cypress-10-5-0-introducing-angular-component-testing
  78. https://github.com/ngx-translate/core
  79. https://blog.angular.dev/version-4-of-angular-2673b29e69f0
  80. https://blog.angular.dev/meet-angular-v19-7b29dfd05b84
  81. https://blog.angular.dev/announcing-angular-v21-57946c34f14b
  82. https://angular.dev/events/v21
  83. https://github.com/angular/angular/blob/main/CHANGELOG.md
  84. https://angular.dev/update-guide
  85. https://angular.dev/reference/releases#deprecation-policy
  86. https://endoflife.date/angular
  87. https://blog.angular.dev/angular-2025-strategy-9ca333dfc334
Add your contribution
Related Hubs
User Avatar
No comments yet.