Angular (web framework)

{{short description|Open source web application framework}}

{{for|the legacy version of Angular|AngularJS}}

{{Infobox software

| name = Angular

| logo = Angular logo (2023).svg

| logo_size =

| developer = Google

| released = 2.0 / {{Start date and age|2016|09|14|df=yes}}{{cite web |url= http://angularjs.blogspot.com/2016/09/angular2-final.html |title= Angular, version 2: proprioception-reinforcement |date= September 14, 2016 |website= blogspot.com |access-date= 2017-03-18 |archive-date= 2017-03-12 |archive-url= https://web.archive.org/web/20170312063434/http://angularjs.blogspot.com/2016/09/angular2-final.html |url-status= dead }}

| latest_release_version = {{wikidata|property|reference|edit| Q28925578 |P348}}

| latest_release_date = {{start date and age|{{wikidata|qualifier| Q28925578 |P348|P577}}}}

| latest preview version = 20.0.0

| latest preview date = {{Start date and age|2025|05|28|df=yes}}{{cite web|url=https://github.com/angular/angular/blob/main/CHANGELOG.md|title=angular/CHANGELOG.md |website=GitHub |access-date=2025-05-28}}

| repo = {{URL|https://github.com/angular/angular|Angular Repository}}

| programming language = TypeScript, JavaScript

| platform = Web platform

| genre = Web framework

| license = MIT License

| website = {{URL|https://angular.dev/}}

}}

Angular (also referred to as Angular 2+){{cite web|url=https://www.sitepoint.com/angularjs-vs-angular/|title=AngularJS and Angular 2+: a Detailed Comparison|date=6 April 2018}} 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.{{Cite web |title=Angular |url=https://angular.io/guide/what-is-angular |access-date=2024-03-26 |website=angular.io}} According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.{{Cite web |title=Stack Overflow Developer Survey 2023 |url=https://survey.stackoverflow.co/2023/?utm_source=social-share&utm_medium=social&utm_campaign=dev-survey-2023 |access-date=2024-06-02 |website=Stack Overflow |language=en}}

Differences between Angular and AngularJS

File:Architecture of an Angular 2 application.png

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.{{cite web|url=https://angular.io/guide/architecture|title=Angular Docs|website=angular.io}} Angular has a different expression syntax, focusing on "[ ]" for property binding, and "( )" for event binding.{{cite web |url=https://gorrion.io/blog/angularjs-vs-angular/ |title= What's the difference between AngularJS and Angular? |date=September 19, 2017 |website= gorrion.io |access-date=2018-01-28}} Angular recommends the use of Microsoft's TypeScript language, which introduces features such as static typing, generics, and type annotations.

Features

= Component-based architecture =

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.{{Cite web |title=Composing with Components · Angular |url=https://angular.dev/essentials/components |access-date=2024-06-02 |website=angular.dev |language=en}}

= Data binding =

Angular supports two-way data binding,{{Cite book |last=Chidester |first=Ashlan |title=Discover Angular |date=2024-04-23 |isbn=9798224446049}} 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.{{Cite web |title=Understanding binding · Angular |url=https://angular.dev/guide/templates/binding |access-date=2024-06-02 |website=angular.dev |language=en}}

= Dependency injection =

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.{{Cite web |title=Dependency injection in Angular |url=https://angular.dev/guide/di |access-date=2024-06-02 |website=angular.dev |language=en}}

= Directives =

Angular extends HTML with additional attributes called directives. Directives offer functionality to change the behavior or appearance of DOM elements.{{Cite web |title=Directives · Overview · Angular |url=https://angular.dev/guide/directives |access-date=2024-06-02 |website=angular.dev |language=en}}

= Routing =

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.{{Cite web |title=Routing · Overview · Angular |url=https://angular.dev/guide/routing |access-date=2024-06-02 |website=angular.dev |language=en}}

= Angular CLI =

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.{{Cite web |title=Angular CLI · Overview · Angular |url=https://angular.dev/tools/cli |access-date=2024-06-02 |website=angular.dev |language=en}}

= Server-side rendering =

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.{{Cite web |last=Żurawski |first=Paweł |date=2024-05-09 |title=Angular SSR: Your server-side rendering implementation guide |url=https://pretius.com/blog/angular-ssr/ |access-date=2024-07-17 |website=Pretius |language=en-US}}

History

Angular 2.0 was announced at the ng-Europe conference 22–23 October 2014.{{cite web |title=Ng-Europe schedule |url=https://2015.ngeurope.org/#schedule |url-status=dead |archive-url=https://web.archive.org/web/20180430113923/https://2015.ngeurope.org/#schedule |archive-date=2018-04-30 |access-date=2018-04-29}} On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha to Developer Preview.{{Cite tweet |number=593797019258359809 |user=angularjs |title=Angular 2 moves from Alpha to Developer Preview! Dev guide and API docs now available at ... angular.io/docs/js/latest |date=30 Apr 2015 |access-date=2015-10-21}} Angular 2 moved to Beta in December 2015,{{Cite web |title=Angular: Angular 2 Beta |url=http://angularjs.blogspot.it/2015/12/angular-2-beta.html |url-status=dead |archive-url=https://web.archive.org/web/20151218005753/http://angularjs.blogspot.it/2015/12/angular-2-beta.html |archive-date=2015-12-18 |access-date=2016-07-13 |website=angularjs.blogspot.it}} and the first release candidate was published in May 2016.{{Cite web |title=angular/angular |url=https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02 |access-date=2016-05-04 |website=GitHub}} 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.{{Cite web |last=Thompson |first=Mark |date=2021-11-04 |title=Angular v13 is now Available |url=https://blog.angular.dev/angular-v13-is-now-available-cce66f7bc296 |access-date=2024-06-02 |website=Angular Blog |language=en}} Angular 14 introduced standalone components and Angular 17 made them the default, de-emphasizing the use of modules.{{Cite web |last=Gechev |first=Minko |date=2023-11-08 |title=Introducing Angular v17 |url=https://blog.angular.dev/introducing-angular-v17-4d7033312e4b#586d |access-date=2024-05-16 |website=Angular Blog |language=en}}

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=

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.{{Cite web|url=http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html |archive-url=https://web.archive.org/web/20170204142402/http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html |archive-date=2017-02-04 |title=Angular: Branding Guidelines for AngularJS|access-date=2017-03-04}}

=Version history=

class="wikitable mw-collapsible"
VersionRelease dateNew features
{{Version |c |Angular 20}}

|May 28, 2025

|by default Angular CLI will not generate suffixes for components, directives, services, and pipes.{{Cite web |last=Gechev |first=Minko |date=2024-05-23 |title=Announcing Angular v20 |url=https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301 |access-date=2025-05-28 |website=Medium |language=en}}

{{Version |co |Angular 19}}

|November 19, 2024

|Angular directives, components and pipes are now standalone by default.{{Cite web |last=Gechev |first=Minko |date=2024-05-23 |title=Meet Angular v19 |url=https://blog.angular.dev/meet-angular-v19-7b29dfd05b84 |access-date=2024-06-02 |website=Medium |language=en}}

{{Version |o |Angular 18}}

|May 22, 2024

|Experimental zoneless change detection support and server-side rendering improvements.{{Cite web |last=Gechev |first=Minko |date=2024-05-23 |title=Angular v18 is now available! |url=https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe |access-date=2024-06-02 |website=Medium |language=en}}

{{Version |o | Angular 17}}

| November 8, 2023{{cite web |last=Gechev |first=Minko |date=8 November 2023 |title=Introducing Angular v17 |url=https://blog.angular.io/introducing-angular-v17-4d7033312e4b |access-date=12 November 2023 |website=Medium |publisher=Angular Blog}}

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.
{{Version |o |Angular 16}}3 May 2023Partial hydration for Angular Universal server-side rendering, experimental Jest support, and esbuild-based build system for development servers.
{{Version |o |Angular 15}}November 18, 2022Standalone APIs, directive composition API.{{Cite web |last=Gechev |first=Minko |date=2022-11-21 |title=Angular v15 is now available! |url=https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8 |access-date=2024-06-02 |website=Angular Blog |language=en}}
{{Version |o |Angular 14}}2 June 2022Typed forms, standalone components, and new primitives in the Angular CDK (component dev kit).{{Cite web |last=Twersky |first=Emma |date=2022-06-03 |title=Angular v14 is now available! |url=https://blog.angular.dev/angular-v14-is-now-available-391a6db736af |access-date=2022-06-03 |website=Angular Blog |language=en}}
{{Version |o |Angular 13}}4 November 2021{{cite web |last1=Thompson |first1=Mark |title=Angular v13 is now Available |url=https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296 |access-date=10 January 2022 |website=Angular Blog|date=4 November 2021 }}

Removed deprecated View Engine renderer.
{{Version |o |Angular 12}}12 May 2021{{Cite web |last=Thompson |first=Mark |date=2021-05-12 |title=Angular v12 is now available |url=https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49 |access-date=2021-05-17 |website=Medium |language=en}}Deprecated support for Internet Explorer 11.
{{Version |o |Angular 11}}11 November 2020{{Cite web |date=4 December 2020 |title=Version 11 of Angular Now Available |url=https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7}}Experimental Webpack 5 support
{{Version |o |Angular 10}}24 June 2020{{Cite web |date=25 June 2020 |title=Version 10 of Angular Now Available |url=https://blog.angular.io/version-10-of-angular-now-available-78960babd41}}New Date Range Picker (Material UI library).
{{Version |o |Angular 9}}6 February 2020Improved build times, enabling AOT on by default
{{Version |o |Angular 8}}28 May 2019Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview.{{Cite web |last=Fluin |first=Stephen |date=2019-02-08 |title=A plan for version 8.0 and Ivy |url=https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7 |access-date=2019-06-07 |website=Angular Blog}}
{{Version |o |Angular 7}}18 October 2018Updates 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.{{Cite web |last=Fluin |first=Stephen |date=2018-10-18 |title=Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more |url=https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c |access-date=2019-06-07 |website=Angular Blog}}
{{Version |o |Angular 6}}4 May 2018{{cite web |title=Version 6.0.0 of Angular Now Available |url=https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 |access-date=4 May 2018}}Experimental custom element support, added ng update command
{{Version |o |Angular 5}}1 November 2017{{cite web |last1=Fluin |first1=Stephen |title=Version 5.0.0 of Angular Now Available |url=https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced |access-date=2 November 2017}}Support for progressive web apps, a build optimizer and improvements related to Material Design.{{cite web |date=18 September 2017 |title=Angular 5 JavaScript framework delayed |url=https://www.infoworld.com/article/3225511/javascript/angular-5-javascript-framework-delayed.html}}
{{Version |o |Angular 4.3}}18 July 2017HttpClient 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.

{{Version |o |Angular 4}}23 March 2017{{Cite web |title=Angular 4.0.0 Now Available |url=http://angularjs.blogspot.ca/2017/03/angular-400-now-available.html |url-status=dead |archive-url=https://web.archive.org/web/20180108131700/http://angularjs.blogspot.ca/2017/03/angular-400-now-available.html |archive-date=2018-01-08 |access-date=2017-03-23 |website=angularjs.blogspot.ca}}Added ngIf and ngFor. Backward compatible with Angular 2.
{{Version |o |Angular 2}}14 September 2016Initial release

= Future releases =

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.{{cite web |last1=Fluin |first1=Stephen |title=Version 9 of Angular Now Available — Project Ivy has arrived! |website=blog.angular.io |date=6 February 2020 |url=https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3 |access-date=22 March 2022}}

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 =

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.{{Cite web|url=https://angular.io/guide/releases#support-policy-and-schedule|title=Angular|website=angular.io|access-date=2019-06-07}}

class="wikitable"

|+Supported Angular Versions

!Version

!Status

!Released

!Active Ends

!LTS Ends

!Duration

^19.0.0

|Active

|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.{{Cite web |title=Angular |url=https://angular.dev/reference/releases#actively-supported-versions |access-date=2025-02-12 |website=angular.dev |language=en}}

Libraries

= Angular Material =

{{redirect|Angular Material|the library of the same name for AngularJS 1.x|AngularJS#AngularJS Material}}

Angular Material is a UI component library that implements Material Design in Angular.{{cite web|url=https://material.angular.io/|title=Angular Material|website=material.angular.io}} 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 =

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.{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components|date=29 September 2018 }}[https://www.wedowebapps.com/angular-18-features-enhancements/ Angular 18 Features & Enhancements]. Published [20 May 2025]. Accessed [20 May 2025].

See also

References

{{reflist}}