{"id":1435,"date":"2024-02-16T00:00:00","date_gmt":"2024-02-15T23:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/angular17\/"},"modified":"2025-11-28T13:31:42","modified_gmt":"2025-11-28T12:31:42","slug":"angular17","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/angular17\/","title":{"rendered":"Angular 17 – What’s new?"},"content":{"rendered":"

and so much more as you can see in the release notes<\/a>.
But I\u2019d like to dive into some that offer quite the Quality of Life improvements<\/p>\n

Built-in control flow<\/h1>\n

Before Angular 17 we\u2019ve always used *ngIf, *ngSwitch, and *ngFor<\/code>, but now there\u2019s a new block template syntax in preview which feels a lot more intuitive, requires no special imports and has better type checking thanks to its improved type narrowing.<\/p>\n

You can automatically migrate existing project with ng generate @angular\/core:control-flow<\/code><\/p>\n

If\/else and even else if!<\/h2>\n

Traditionally we\u2019d do<\/p>\n

<div *ngIf=\"usingLatest; else outdated\">\n   You\u2019re using the latest version. \n<\/div> \n<ng-template #outdated>\n   You are using an outdated version \n<\/ng-template>\n<\/code><\/pre>\n
Now we can do<\/p>\n
@if (usingLatest) {\n  Thank you for using the latest version\n} @else {\n  You are using an outdated version\n}\n<\/code><\/pre>\n
This construction also allows us to write an if\/else if\/else construction which formerly wasn\u2019t possible.<\/p>\n
Iteration<\/h2>\n
To loop over a list of elements we\u2019d perform<\/p>\n
<div *ngFor=\"let angularRelease of angularReleases\">\n  Release: {{ angularRelease.versionNumber }} - Date: {{ angularRelease.date }} <br>\n<\/div>\n<\/code><\/pre>\n
With optionally<\/strong> a trackBy<\/code> function. In the new approach, track<\/code> is mandatory. The new for statement uses a new diffing algorithm which is quite a bit faster according to community framework benchmarks<\/strong><\/a>.
 It\u2019s also quite easy to add an empty placeholder.<\/p>\n
@for (angularRelease of angularReleases; track angularRelease.versionNumber) {\n  Release: {{ angularRelease.versionNumber }} - Date: {{ angularRelease.date }} <br>\n} @empty {\n  Empty list of releases\n}\n<\/code><\/pre>\n
Switches<\/h2>\n
Switches have also become quite a lot more convenient, from:<\/p>\n
<div [ngSwitch]=\"roll\">\n  <app-one *ngSwitchCase=\"1\"\/>\n  <app-two *ngSwitchCase=\"2\"\/>\n  <app-three *ngSwitchDefault\/>\n<\/div>\n<\/code><\/pre>\n
To<\/p>\n
@switch (roll) {\n  @case (1) { <app-one\/> }\n  @case (2) { <app-two\/> }\n  @default { <app-three\/> }\n}\n<\/code><\/pre>\n
Deferrable views<\/h1>\n
This is the planned roads forwards for lazy loading. It utilizes the new block mechanism for standalone<\/strong> components to make our applications faster, by as the name implies easily facilitating declarative, deferred loading. One of the nice things about this, is that this all also happens at compile-time, all the complexity is abstracted away.<\/p>\n
Let\u2019s use this example:<\/p>\n
@defer (on hover) {\n  <app-heavy\/>\n} @loading {\n  Loading\u2026\n} @error {\n  Loading failed\n} @placeholder (minimum 2000ms) {\n  <div>Placeholder that will be shown for 2000ms minimally (to prevent flickering in case the deferred component loads quickly)<\/div>\n}\n<\/code><\/pre>\n
In this example, we\u2019re deferring the loading of a heavy component, until the block\u2019s been hovered over. In the interim we\u2019ll be showcasing the placeholder (and in this case, minimally for 2 seconds). After which we\u2019ll see either the loading in case it takes long\/the result\/loading failed in case of an error.<\/p>\n
Only @defer<\/code> is required, @loading | @error | @placeholder<\/code> are all optional.<\/p>\n
There possible triggers are:<\/p>\n