#It's FrontendFriday - Angular 17 - What's new?

Angular Playground

It is interesting to note that you can also download the project displayed in the browser and then edit it locally in an editor, for example Visual Studio Code.

Angular recommends using Chrome to be able to use the interactive code editor in the browser. You will also need a little patience until the browser editor is initially loaded. 

New control flow syntax

There is a new control flow syntax in Angular 17. Previously, if you wanted to use a simple if condition in the template or iterate over a list, you had to work with *ngIf and *ngFor. This was sometimes not very intuitive and is now much more convenient with the new control flow syntax, as the following example of a simple condition query shows.²

// alte Code Flow Syntax
<div *ngIf="loggedIn; else anonymousUser">
        The user is logged in
</div>
<ng-template #anonymousUser>
        The user us not logged in
</ng-template>

// neue Code Flow Syntax
@if (loggedIn) 
{ 
        The user us logged in 
} @else { 
        The user is not logged in 
}

Comparison between Conditionals old and new control flow syntax³

Here you can see how the code becomes much more readable, as you can easily work with the keywords @if and @else, just as you are used to from other programming languages. There are also some nice simplifications in the for loops. One of them can be seen in the following code example.

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

For-Loop in the new control flow syntax⁴

The @empty case can simply be requested here instead of having to explicitly query user.count. Furthermore, according to Angular, the performance of for loops should be up to 90 % better than in the previous control flow.⁵

It is therefore worth switching to the new syntax as soon as possible. 

Deferable Views

Another element of the new control flow syntax is @defer or deferable views. This allows individual components to be loaded lazily. The following code snippet shows how a list of comments is loaded lazily in a component and displayed as soon as the data is available.⁶

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

Application example of the @defer block

Further blocks are available within an @defer block, such as @laoding, @error or @placeholder, which can be used to easily react to different statuses when loading data. Another practical functionality is that the @defer block can react to interactions, for example to a click event or a timer, in order to then load data lazily. Detailed views are a classic use case for this.⁷ 

Sever Side Rendering

Server side rendering was previously only possible by explicitly adding the @nguniversal package and has now been fully integrated into Angular Core in Angular 17. New projects can activate server side rendering in the project directly when they are created (ng new my-projcet -ssr). Server side rendering can also be activated later in existing projects (ng add @angular/ssr).^{8 9}

TypeScript and Node.js

Here you must use at least TypeScript 5.2 and NodeJS 18.13.0 for Angular 17. Lower versions are no longer supported.¹⁰

Angualr CLI

New projects created with Angular 17 are now built with the new Angular build system esbuild + Vite. This not only improves build times by 67 %, but also promises smaller builds.¹¹

Routing is now added automatically when you create a new component with ng g c my-component.¹²

Each component is also automatically created as a standalone component unless otherwise specified. Although it is stated that NgModules will be retained for the foreseeable future, it is nevertheless recommended that projects are gradually converted to standalone. There are instructions for this here.¹³

Is it worth switching to Angular 17?

The new Angular version offers many new features that make life easier for developers. If you want to convert projects as quickly as possible, you can here with the help of the Angular Update Guide.

For existing projects, there is always the question of effort and benefit and whether it is possible with regard to the TypeScript and Node.js versions.

For a new project start, it is definitely worth starting with the new Angular version 17.