Whats new in Angular 17?

Angular 17 was released on November 8, 2023. This new version brings a lot of new stuff.

1. New identity

Along with the new logo (that can be seen on the right side of this blog post image) we got a new website for Angulars documentation - angular.dev. New site highlights are new interactive tutorial and playground for testing in fresh new enviroment.

2. Migration from v16

One of the most simple upgrades with little to no breaking changes as can be seen here. To implement new built-in control flow run 

ng generate @angular/core:control-flow

command

3. Built-in control flow

One of the deffinitely more visible changes is new built-in control flow syntax. Biggest benefit for developers is a far more ergonomic syntax that is closer to JavaScript and more intuitive.

3.1 Conditional statements

*ngIf OLD:

div *ngIf="this; else that">
  this
</div>
<ng-template #that>
  that
</ng-template>

NEW: + allows elseIf that wasn't available before

@if (this) {
  this
} @else {
  that
}

ngSwitch OLD:

<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

NEW:

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

3.2 Built in for loop

*ngFor OLD:

<li *ngFor="let item of items; trackBy: trackByFn">{{ item.Text }}</li>

NEW:

@for (item of items; track item.Id) {
  {{ item.Text }}
} @empty {
  Empty list of items
}

4. Deferrable views

@defer (on viewport) {
  <comment-list />
} @placeholder {
  <!-- A placeholder content to show until the comments load -->
  <img src="comments-placeholder.png">
}

In the example above, Angular first renders the contents of the placeholder block. When it becomes visible in the viewport, the loading of the <comment-list/> component starts. Once the loading is completed, Angular removes the placeholder and renders the component.

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

There are blocks for loading and error states.

Deferrable views offer a few more triggers:

• on idle — lazily load the block when the browser is not doing any heavy lifting
• on immediate — start lazily loading automatically, without blocking the browser
• on timer(<time>) — delay loading with a timer
• on viewport and on viewport(<ref>) — viewport also allows to specify a reference for an anchor element. When the anchor element is visible, Angular will lazily load the component and render it
• on interaction and on interaction(<ref>) — enables you to initiate lazy loading when the user interacts with a particular element
• on hover and on hover(<ref>) — triggers lazy loading when the user hovers an element
• when <expr> — enables you to specify your own condition via a boolean expression

@defer (on viewport; prefetch on idle) {
  <comment-list />
}

Deferrable views also provide the ability to prefetch the dependencies ahead of rendering them. Adding prefetching is as simple as adding a prefetch statement to the defer block and supports all the same triggers.

5. New lifecycle hooks

• afterRender — register a callback to be invoked each time the application finishes rendering
• afterNextRender — register a callback to be invoked the next time the application finishes rendering

6. Dependency injection debugging in DevTools

7. Angular Signals -> dev preview

8. Angular 17 supports Angular Material 16

Angular Material 16 is the last big Angular Material update that supports legacy non MDC components as depricated. Angular 18 will not support Angular Material 16 anymore so no more legacy components.