Framework · Since 2016

Angular

Angular is a TypeScript-based web framework led by Google, with routing, forms and HTTP built in for building large, maintainable web applications.

Start the guide Discussions

Angular is a front-end framework for building web applications in TypeScript. It was first released in 2016 and is developed in the open by the Angular team at Google. Despite the shared name, it is a different framework from AngularJS, which dates back to 2010. You build the UI from components, each made of a template and a TypeScript class, track changing state with signals, and share common logic through services provided by dependency injection.

Because the router, forms, HttpClient, internationalization and testing utilities all ship as official packages, Angular is a popular choice for large business applications and admin interfaces that many teams maintain over years. Its consistent structure and code generators mean that Angular projects tend to look alike, so new developers can find their way around quickly. Server-side rendering and static site generation are supported with the same tooling.

The fastest way to start is to install Node.js, create a project with the Angular CLI and run the development server with ng serve. The official site, angular.dev, offers an interactive tutorial that runs in the browser as well as in-depth guides for each topic. A basic understanding of TypeScript helps a lot, since Angular code is built from classes, types and decorators.

Highlights

Standalone components

Each component imports the components and directives it uses directly, so you can split the UI into small, self-contained pieces without extra modules.

Signal-based reactivity

Declare state and derived values with signal, computed and effect, and Angular tracks exactly what changed to update only the affected parts of the page.

Batteries included

The router, reactive forms, HttpClient, internationalization and server rendering are official packages, so you spend less time choosing core libraries.

Powerful CLI

The Angular CLI handles project setup, code generation, the dev server, tests and optimized production builds in one consistent workflow.

Where it is used

Large-scale business web applications
Admin panels and internal dashboards
Form-heavy single-page applications
Server-rendered and prerendered websites

Install

1
Set up Node.js
The Angular CLI runs on Node.js. Install an LTS release from nodejs.org and confirm that node and npm report their versions. The supported Node.js versions are listed in the version compatibility table on angular.dev.
```
node --version && npm --version
```
2
Install the Angular CLI
Install the Angular CLI globally with npm. This gives you the ng command; run ng version to see what was installed.
```
npm install -g @angular/cli
```
3
Create and run a project
Create a new project with ng new and start the dev server. After you answer the prompts about the stylesheet format and SSR, the app opens at http://localhost:4200.
```
ng new my-app && cd my-app && ng serve --open
```

Your first program

Your first component

The @Component decorator turns a class into a component, a piece of the UI. The selector is the tag name used in HTML, {{ }} in the template displays a value, and (click) binds an event to a method. A signal is read by calling it like a function and changed with update; when it changes, Angular refreshes the view automatically.

src/app/app.ts

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello, {{ name() }}!</h1>
    <button (click)="increment()">Clicked {{ count() }} times</button>
  `,
})
export class App {
  protected readonly name = signal('Angular');
  protected readonly count = signal(0);

  increment() {
    this.count.update((value) => value + 1);
  }
}

npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --open

Everyday tools

Angular CLI: The official command-line tool. The ng command creates projects, generates components and services, runs the dev server and tests, and produces production builds.
Angular Language Service: Adds template autocompletion, error checking and go-to-definition to your editor. Available as a VS Code extension and built into other IDEs.
Angular DevTools: A browser extension for Chrome and Firefox that lets you inspect the component tree and state and profile change detection.
Angular Material: The UI component library from the Angular team, offering Material Design buttons, tables and dialogs plus the accessibility-focused CDK.

Step-by-step guide

Six chapters that take you from installation to the core ideas of Angular.

Official docs and resources

Languages

TypeScriptTypeScript adds static types to JavaScript, catching errors before your code runs and making large codebases easier to maintain.

Discussions

Start a discussion

Ask questions, share experience and trade opinions about Angular.

No discussions yet. Start the first one.