======================================

1. Control Flow Syntax

====================================== // Old way

<div *ngIf="user">{{user.name}}</div>

// New way @if (user) { {{user.name}} }

// Old way

<div *ngFor="let item of items">{{item}}</div>

// New way @for (item of items; track item.id) { {{item}} }

======================================

2. Deferrable Views

====================================== Deferrable Views are a new feature that lets you lazy-load parts of your template based on conditions. This feature is particularly useful for optimizing large applications with heavy components that aren't immediately needed. // Defer loading component @defer { <heavy-component /> } on viewport;

// With loading state @defer { <heavy-component /> } loading { <loading-spinner /> }

// Load when element enters viewport @defer { <expensive-component /> } on viewport;

// Load after 2 seconds @defer { <expensive-component /> } on timer(2000);

// Load on user interaction @defer { <expensive-component /> } on interaction;

// Full Syntax Options @defer { <expensive-component /> } on viewport // Trigger condition when isReady() // Additional condition prefetch // Pre-load but don't render loading { // Show while loading <spinner/> } error { // Show if loading fails <error-message/> } placeholder { // Show before loading starts <placeholder/> }

======================================

3. Signal Forms

====================================== // New signal-based form const form = new FormGroup({ name: new FormControl('', { nonNullable: true }), email: new FormControl('') });

// Access as signals console.log(form.controls.name.value());

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

export class MyComponent { // Create form controls with signals nameControl = new FormControl('', { nonNullable: true });

// Group them form = new FormGroup({ name: nameControl, email: new FormControl('') }); }

// Template

<form [formGroup]="form"> <input [formControl]="nameControl"> Value: {{ nameControl.value() }} <!-- Note: value is now a signal --> Errors: {{ nameControl.errors() }} </form>

// Component // Subscribe to changes nameControl.valueChanges().subscribe(value => console.log(value));

// Check validity if (form.valid()) { // Note: valid is now a signal // ... }

// Set values nameControl.setValue('New Value');

======================================

4. Vite Setup

======================================

Create new project with Vite

ng new my-app --collection=@angular/vite

New Project

Create new Angular project with Vite

ng new my-app --collection=@angular/vite

Or add to existing

ng add @angular/vite

Configuration (vite.config.ts) import { defineConfig } from '@angular/vite';

export default defineConfig({ // Basic config build: { target: 'es2020' }, // Optional optimizations optimizeDeps: { include: ['@angular/common'] } });

======================================

5. Hydration

====================================== Is exclusively for Server-Side Rendered (SSR) Angular applications. // In app.config.ts import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = { providers: [ provideClientHydration() ] };