Angular 17: New Control Flow Syntax and Deferrable Views

Angular 17 is a milestone release dubbed the "Renaissance of Angular" — introducing new template syntax, deferrable views, and a completely redesigned documentation site at angular.dev.

Built-in Control Flow

The new @if, @for, and @switch syntax replaces *ngIf, *ngFor, and *ngSwitch structural directives with something cleaner:

<!-- Before -->
<div *ngIf="user; else loading">{{ user.name }}</div>
<ng-template #loading>Loading...</ng-template>

<!-- Angular 17 -->
@if (user) {
  <div>{{ user.name }}</div>
} @else {
  Loading...
}

@defer — Lazy Template Blocks

Deferrable views are a completely new concept — entire sections of a template can be lazily loaded based on triggers:

<!-- Load when element enters viewport -->
@defer (on viewport) {
  <app-heavy-dashboard />
} @placeholder { <div>Scroll to load...</div> }
  @loading    { <app-spinner /> }
  @error      { <p>Failed to load.</p> }

New angular.dev

Angular launched a completely redesigned documentation site at angular.dev with an interactive playground, updated learning paths, and better search — replacing the old angular.io.