Angular 22 Cheatsheet

Angular CLI

• Install the Angular CLI — Install the command-line tool globally.
• Create an app — Create a new workspace with an application.
• Start the dev server — Build and serve the app with live reload at http://localhost:4200.
• Serve and open the browser — Start the dev server on a given port and open the browser.
• Generate a component — Create a component with its template, styles and test.
• Generate a service — Create an injectable service.
• Preview what a generator creates — List the files without writing anything.
• Generate other building blocks — Generate a route guard, pipe, directive or interface.
• Build for production — Create an optimized build in dist.
• Run unit tests — Run the unit tests with the configured test runner.
• Add a library — Install a package and run its setup, for example Angular Material.
• Update Angular — List available updates, then update the core packages.

Components and templates

• Write a standalone component — A component declares its own imports, with no NgModule.
• Pass data in and out — Receive a value with input() and notify the parent with output().
• Show content conditionally — Use the built-in @if block instead of *ngIf.
• Loop over items — Use @for. The track expression is required and helps Angular reuse DOM elements.
• Handle an event — Call a method when the user clicks.
• Bind a property — Set an element property from a component value.
• Toggle a CSS class — Add a class when a condition is true.
• Bind a form field in both directions — Keep a signal in sync with an input. Needs FormsModule.
• Format values with pipes — Format dates, currency and text in a template.
• Load part of a template lazily — Load a heavy component only when it scrolls into view.

Signals and services

• Create a signal — Hold a value that notifies readers when it changes.
• Derive a value — Compute a value from other signals. It updates automatically.
• Run code when signals change — Run a side effect whenever the signals it reads change.
• Create a service — Make a class injectable in the root injector, so one instance is shared.
• Use a service — Get a dependency with the inject function.
• Fetch data over HTTP — Request JSON with HttpClient, which returns an observable. Provide it with provideHttpClient().
• Show an observable in a template — Subscribe and unsubscribe automatically.
• Load data with a resource — Load async data into signals that track loading and error state.

Routing and forms

• Define routes — Map URLs to components, with a redirect and a wildcard.
• Lazy-load a route — Load a component's code only when its route is visited.
• Link to a route — Navigate without a page reload and mark the active link.
• Read a route parameter — Read :id from the URL as a signal-friendly input. Needs withComponentInputBinding().
• Protect a route — Allow navigation only when a condition holds.
• Build a reactive form — Define a form group with validators. Import ReactiveFormsModule.
• Bind a reactive form — Connect the form group to the template and submit it.
• Bootstrap the app — Start the app with a root component and providers for routing and HTTP.

Related cheatsheets

• Astro cheatsheet — Build fast content sites with Astro: components, layouts, routing, content collections, islands, endpoints and deployment.
• Django 6 cheatsheet — Create projects, run migrations, test and deploy Django apps, plus the ORM queries you use every day.
• .NET and ASP.NET Core 10 cheatsheet — The dotnet CLI for creating, building, testing and publishing projects, plus common ASP.NET Core and EF Core code.
• Express 5 cheatsheet — Build HTTP servers and APIs with Express 5 on Node.js.
• FastAPI 0.115 cheatsheet — Install, run, test and deploy FastAPI apps from the command line.
• Flask 3 cheatsheet — Create, run, test and deploy Flask apps, with routes, templates, blueprints, sessions and database snippets.

Browse all cheatsheets