Angular 19 Cheat Sheet & Study Guide

There have been some amazing changes to Angular in the past couple of years. Here is a summary for those learning or need a quick reference to get started on your next Angular project!

More Angular tips and snippets.

🚀 What’s New in Angular 19?

• Incremental Hydration: Faster SSR with partial client-side hydration.

• Route-Level Render Mode: Customize SSR/CSR per route.

• Linked Signals: Reactive primitives for state management.

• Hot Module Replacement (HMR): Real-time update of templates/styles without full reloads.

• Standalone Components Default: No need for NgModules for most uses.

• Deferrable Views: Delay loading non-critical JS for better performance.

• Zoneless Change Detection (experimental): Performance boost, no zone.js.

• Enhanced Testing: Better Jest integration, new test runner.

• Time Picker & 2D Drag/Drop: New built-in components.

🔧 Essential Angular CLI Commands

Command	Alias	Description
ng new my-app		Create new Angular workspace
ng serve	s	Run local dev server (http://localhost:4200)
ng build –prod	b	Build app for production to dist/
ng generate component hello	g c	Generate new component called Hello
ng generate service data	g s	Generate service (DataService)
ng add @angular/material		Add Material UI to project
ng test	t	Run unit tests
ng lint		Run linters for code quality
ng update		Update framework/dependencies
ng deploy		Deploy project (setup needed)
ng generate pipe capitalize	g p	Generate a custom pipe

🏗️ Project Structure

/src/appapp.component.ts // Root componentapp.module.ts // App module (fewer NgModules in Angular 19)/assets // Static assets/environments // Environment configangular.json // Workspace configuration

💡 Quick Code Snippets

1. Creating a Standalone Component

ng g component hello --standalone

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

@Component({
selector: 'app-hello',
standalone: true,
template: `<h1>Hello Angular 19!</h1>`
})
export class HelloComponent {}

2. Using Signals (Reactive State)

import { signal } from '@angular/core';export class CounterComponent {count = signal(0);increment() {this.count.update(c => c + 1);}}

3. Deferrable Views (Partial Hydration for SSR)

<div *ngIf="user$ | async as user; else loadingTemplate">
{{ user.name }}
</div>
<ng-template #loadingTemplate>
<p>Loading...</p>
</ng-template>

4. Custom Pipe Example

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalize', standalone: true })
export class CapitalizePipe implements PipeTransform {
transform(value: string) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}

// Usage in template:
// {{ 'angular' | capitalize }} <!-- Output: Angular -->

5. Reactive Form Example

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
selector: 'app-form',
standalone: true,
template: `
<form [formGroup]="form">
<input formControlName="username">
</form>
`,
})
export class FormComponent {
form = new FormGroup({
username: new FormControl('')
});
}

✅ Best Practices

• Prefer standalone components/pipes/services.

• Use signals for local state, minimal RxJS/NgRx for global or complex state.

• Lazy-load routes and deferrable views for faster load.

• Maintain separation of concerns: keep code modular, use services for logic/data, components for UI.

• Always use strict typing and enable “strictNullChecks.”

• Write unit tests for components, services, and pipes.

• Use Angular CLI for all generators and scripts.

• Follow security best practices: sanitize user data, use Angular’s built-in XSS protections.

• Keep dependencies updated with ng update.

📝 Handy Development Tips

• Hot Module Replacement: Enabled by default in Angular 19 for styles/templates (no full reload).

• Modern Routing: Define per-route SSR/CSR, guard and lazy-load with built-in router APIs.

• DevTools: Use Angular DevTools Chrome extension for component/state tree inspection.

This guide gives you the essentials for Angular 19. For continued learning, check out the official Angular documentation and experiment with the CLI and new features.