Quick Summary of Angular 17
Tags: summary, newfeatures, angular17, angular
Published: 2023-11-13 19:37:32

---
title: Quick Summary of Angular 17
published: true
date: 2023-11-13 18:14:42 UTC
tags: summary,newfeatures,angular17,angular
canonical_url: https://medium.com/@seanhaddock_60973/quick-summary-of-angular-17-bf1776e96b8e
---

![](https://cdn-images-1.medium.com/max/960/0*B8w8g6fh_tYV_TI7)
_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](https://blog.angular.io/introducing-angular-v17-4d7033312e4b)” 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](https://angular.io/guide/control_flow) syntax (replaces \*ngIf, \*ngSwitch and \*ngFor). Here are the examples presented in the [post](https://blog.angular.io/introducing-angular-v17-4d7033312e4b) (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](https://angular.io/guide/defer#deferrable-views) utilize [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) and the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/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](https://blog.angular.io/introducing-angular-v17-4d7033312e4b):

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

Other [triggers](https://angular.io/guide/defer#triggers) are idle, immediate, timer, interaction, hover and when <expr>.

#### SSR/SSG improvements

Angular Universal (SSR) has been moved to the [CLI](https://angular.io/guide/ssr#enable-server-side-rendering) 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_](https://angular.io/guide/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](https://angular.dev/) will replace Angular.io in v18 for documentation and interactive learning. It also has a [Playground](https://angular.dev/playground).
- Signals are out of developer preview and more enhancements are coming in v18.
- [esbuild](https://esbuild.github.io/) plus [Vite](https://vitejs.dev/) 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](https://angular.io/api/core/afterRender) and [afterNextRender](https://angular.io/api/core/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](https://angular.io/guide/devtools) for dependency injection debugging.
- Ability to use native browser animated transitions between routes by passing [withViewTransitions()](https://angular.dev/api/router/withViewTransitions) to provideRouter().
- Ability to lazy load the animations module with [provideAnimationsAsync()](https://angular.dev/guide/animations#enabling-the-animations-module).
- Continued work on [Jest](https://jestjs.io/) and [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) (which will replace Karma).
- You can do this <my-expander expanded/> instead of this <my-expander expanded=“true”/> if you add a [transform](https://angular.dev/guide/components/inputs#input-transforms) 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](https://blog.angular.io/introducing-angular-v17-4d7033312e4b)