New features in Angular 17

Angular 17, the latest version(Nov 2023) of the popular web framework, brings a host of exciting features and improvements. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. With a new look and a set of forward-thinking features the Angular brings everyone along to the future with version 17, setting new standards for performance and developer experience. Lets check some of the intresting new features of Angular 17 in this article.

Built-in control flow:

Angular 17 introduces a new way to write Conditions (like “if” statements), Switch Cases and For Loop syntax, that’s faster and easier to read. To improve developer experience, they have released a new block template syntax that gives us powerful features with simple, declarative APIs. Under the hood, the Angular compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.

Conditional statements:

Let’s look at a side by side comparison with *ngIf:

<div *ngIf=”loggedIn; else anonymousUser”>
The user is logged in
</div>
<ng-template #anonymousUser>
The user is not logged in
</ng-template>

With the built-in if statement, this condition will look like:

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

Switch Cases:

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

with the built-in control flow turns into:

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

For Loop:

basic syntax with the built-in control flow:

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

We often see performance problems in apps due to the lack of trackBy function in *ngFor. A few differences in @for are that track is mandatory to ensure fast diffing performance. 

Deferrable views:

Imagine you’re loading a webpage, and instead of waiting for everything to load at once, Angular 17 lets you load only what’s needed right away, making your app faster and more responsive. Deferrable views bring performance and developer experience to the next level because they enable declarative and powerful deferred loading with unprecedented ergonomics.

Let’s suppose you have a blog and you’d like to lazily load the list of user comments. Currently, you’d have to use ViewContainerRef while also managing all the complexity for cleanups, managing loading errors, showing a placeholder, etc. Taking care of various corner cases may result in some non-trivial code, which will be hard to test and debug.

The new deferrable views, allow you to lazily load the list of comments and all their transitive dependencies with a single line of declarative code:

@defer {
<comment-list />
}

Starting to lazily load a component when a certain DOM element enters the viewport involves a lot of more non-trivial logic and the IntersectionObserver API. Angular makes using IntersectionObservers as simple as adding a deferrable view trigger!

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

There are also blocks for loading and error states:

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

Server-Side Rendering (SSR):

Angular 17 includes enhanced support for SSR. SSR pre-renders your app on the server, delivering fully rendered HTML to the client. This improves performance, aids SEO, and enhances user experience.

Here’s how it works:

1) Initial HTML Content: When a user requests a page, the server generates an initial HTML content that includes the initial state of the page. This pre-rendered HTML content is sent to the browser.

2) Client-Side Initialization: After receiving the HTML content, Angular initializes the application on the client side. It uses the data embedded in the HTML to set up the initial state of the app.

How to Implement SSR in Angular 17 ?

1) Creating a New Angular Application with SSR:

Use the following command in the command line interface (CLI):

ng new –ssr

2) Adding SSR to an Existing Application:

If you already have an Angular application, you can add SSR using:

ng add @angular/ssr

New lifecycle hooks:

To improve the performance of Angular’s SSR and SSG, in the long-term we’d like to move away from DOM emulation and direct DOM manipulations. At the same time, throughout most applications’ lifecycle they need to interact with elements to instantiate third-party libraries, measure element size, etc.

To enable this, we developed a set of 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

Style and styleUrls as strings:

Angular components support multiple stylesheets per component. However, the vast majority of cases when we want to style my components we create an array with a single element pointing to the inline styles or referencing an external stylesheet. A new feature enables you to switch from:

@Component({
styles: [`
…
`]
})

@Component({
styleUrls: [‘styles.css’]
})

…to the simpler and more logical:

@Component({
styles: `
…
`
})

@Component({
styleUrl: ‘styles.css’
})

This is more ergonomic, more intuitive, and plays better with automated formatting tools.
Note: It still support multiple stylesheets when you use an array.

Angular 17 is all about speed, simplicity, and a delightful developer experience. Whether you’re building a small app or a complex web platform, this version empowers you to create amazing experiences. So, buckle up, explore the new features, and let Angular 17 take your web development to new heights! 🚀✨