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!

Click here to view other Angular-related tips!

🚀 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.^[4][5]

🔧 Essential Angular CLI Commands

🏗️ Project Structure

/src
/app
app.component.ts // Root component
app.module.ts // App module (fewer NgModules in Angular 19)
/assets // Static assets
/environments // Environment config
angular.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.
  ^[10][8]

📝 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.