Getting Started with Angular

This section documents modern, standalone Angular — signals, the built-in @if / @for / @switch control flow, @defer, typed reactive forms, provideHttpClient, functional guards and interceptors, and server-side rendering with hydration — as described by the official documentation at angular.dev, which is the reference these pages are written and verified against.

This content was generated with the assistance of AI and should be verified against angular.dev before being relied on in production. Angular ships a major release roughly every six months and its APIs continue to evolve: the examples here target the current major release; where a consulted source disagrees with the current documentation, the documentation wins and the difference is noted.

This section’s bibliography lists the reference material consulted while preparing these pages.

Angular is a batteries-included, TypeScript-first framework for building single-page web applications. It ships its own component model, routing, forms, HTTP client, testing tools, and a command-line interface, so a new project is productive without assembling a stack of separate libraries.

What Angular is

Angular is a framework, not just a view library. A view library (such as React) renders components and leaves routing, forms, HTTP, and build tooling to the ecosystem; Angular provides all of those as first-party, versioned packages that upgrade together.

TypeScript-first. Components, services, templates, and configuration are all type-checked, including expressions inside templates.
Single-page application (SPA) model. The browser loads one HTML shell and one JavaScript bundle; the Angular router then swaps views client-side and (optionally) lazy-loads more code on demand, so navigation does not trigger a full page reload.
Reactive rendering. You describe the view as a function of state. When state changes — a signal is updated, an event fires, an HTTP response arrives — Angular re-runs change detection and updates only the DOM nodes whose bound values changed.

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

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name() }}</h1>`,
})
export class Greeting {
  readonly name = signal('Angular');
}

See What is Angular? and Essentials for the guided introduction.

The Angular CLI workspace

The Angular CLI scaffolds, serves, builds, and tests the app. Create a workspace with either command:

npm create @angular@latest my-app
# or, with the CLI installed globally (npm i -g @angular/cli):
ng new my-app

The generated workspace has a predictable layout:

my-app/
  angular.json          # workspace + build/serve/test target configuration
  package.json
  tsconfig.json         # base TypeScript config (strict mode on)
  src/
    main.ts             # entry point: calls bootstrapApplication(App, appConfig)
    index.html          # the single HTML shell
    styles.css          # global styles
    app/
      app.ts            # root standalone component
      app.config.ts     # ApplicationConfig: the provider list
      app.routes.ts     # Routes array

Day-to-day CLI commands:

ng serve                 # dev server with hot reload at http://localhost:4200
ng build                 # production bundle into dist/
ng test                  # run unit tests
ng generate component ui/button   # scaffold a component (alias: ng g c)
ng add @angular/material          # install + configure a package
ng update                         # migrate dependencies to a newer Angular

See Installation for prerequisites (a current Node.js LTS) and the CLI overview for every command and flag.

Bootstrapping without a root NgModule

Modern Angular applications start from a standalone root component and a plain configuration object — there is no root NgModule. main.ts calls bootstrapApplication:

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

// app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideHttpClient(withFetch()),
  ],
};

Each capability is added through a provide* function in the providers array instead of by importing a feature NgModule. Libraries expose provideRouter, provideHttpClient, provideAnimationsAsync, and so on. See Dependency injection and bootstrapApplication.

Modern baseline: what’s current

Examples throughout this section assume a current major release, where the following are the default or recommended approach:

Standalone by default — components, directives, and pipes declare their own imports; NgModule is legacy. See Components and importing dependencies.
Signals for reactive state — signal(), computed(), effect(). See Signals and the signals guide.
Built-in control flow — @if, @for, @switch in templates instead of the legacy structural directives. See Control flow and @defer and control flow.
@defer blocks — declarative lazy loading of template sections. See deferrable views.
Zoneless change detection — provideZonelessChangeDetection() drops the Zone.js dependency and schedules change detection from signals and events. See Lifecycle and change detection and zoneless.
SSR with hydration — @angular/ssr renders on the server and the client reuses that DOM. See Production and performance and server-side rendering.

Angular ships a major release roughly every six months, with an active-support window followed by long-term support (LTS). Read the update guide to migrate between versions and the release schedule for support windows and the deprecation policy.

Tooling

Angular DevTools is a browser extension (Chrome and Firefox) that adds a component-tree inspector, a signal/property viewer, and a change-detection profiler. Install it and open the Angular tab in the browser developer tools. See Angular DevTools.

The Angular Language Service powers editor features for templates: autocompletion, go-to-definition, type-aware diagnostics, and hover information for bindings written in HTML files or inline template strings. It runs in VS Code (the official Angular Language Service extension), WebStorm, and any editor with a TypeScript plugin host. See Angular Language Service.

Editor setup is minimal: enable the Angular Language Service extension, turn on format-on-save (Prettier handles both TypeScript and templates), and keep the workspace tsconfig.json strict settings that ng new generates. VS Code with the language service is the most common setup and needs no further configuration.