Quick Summary of Angular 17

Angular’s New Logo

Angular 17 was released last week, and this is my attempt to summarize Minko Gechev’s excellent post “Introducing Angular v17” as succinctly as possible. I recommend reading his post in full, but here is the Reader’s Digest version:

New control flow syntax (developer preview)

More intuitive and performant (up to 90% faster) control flow syntax (replaces *ngIf, *ngSwitch and *ngFor). Here are the examples presented in the post (condensed):

// if
@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

// switch
@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

// for loop
@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

Deferrable views (developer preview)

Deferrable views utilize dynamic imports and the Intersection Observer API to lazy load components and their dependencies (optionally with prefetching) based on various triggers, such as when the component enters the viewport. Here is an example from the post:

@defer (on viewport; prefetch on idle) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

Other triggers are idle, immediate, timer, interaction, hover and when .

SSR/SSG improvements

Angular Universal (SSR) has been moved to the CLI so that you get prompted to enable SSR and SSG when executing ng new (or you can add it later with ng add @angular/ssr). Also, hydration is out of developer preview and is enabled by default.

Miscellaneous

• Standalone is now the default for all schematics and the recommendation is to move all projects to standalone gradually.
• Angular.dev will replace Angular.io in v18 for documentation and interactive learning. It also has a Playground.
• Signals are out of developer preview and more enhancements are coming in v18.
• esbuild plus Vite is out of developer preview and enabled by default, yielding 67%, 87%, 80% speed improvements for build time, hybrid build time and hybrid serve time respectively.
• New afterRender and afterNextRender lifecycle hooks.
• You don’t need to use an array when setting a component style — e.g., styleUrl: ‘styles.css’ instead of styleUrl: [‘styles.css’].
• New UI in Angular DevTools for dependency injection debugging.
• Ability to use native browser animated transitions between routes by passing withViewTransitions() to provideRouter().
• Ability to lazy load the animations module with provideAnimationsAsync().
• Continued work on Jest and Web Test Runner (which will replace Karma).
• You can do this instead of this if you add a transform to your input like this: @Input({ transform: booleanAttribute }) expanded: boolean = false;
• Rebranding.

Reminders

• Developer preview doesn’t mean that something is not ready to use, it just means that breaking changes could be introduced before the next major release.
• Always check to see if there is a schematic to help you migrate legacy code.

Bibliography

• Introducing Angular v17. Last month marked the 13th anniversary… | by Minko Gechev | Nov, 2023 | Angular Blog