Chat with your data: Unternehmensdaten als Basis für einen eigenen KI-Assistenten nutzen.
Zum Angebot 

Angular 17 Recap and What’s Next?

3 ​​min

With Angular v18, the next major release is just around the corner. In this article, we take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.

Built-in control flow

A new block template syntax has been implemented that provides powerful functionality with simple syntax. Under the hood, the Angular compiler converts the syntax into efficient JavaScript statements that can perform control flow, lazy loading, and more.

Conditional statements

Built-in for loop

Another notable feature is the introduction of a built-in for-loop, which improves rendering speed and also provides a JavaScript-like syntax:

The built-in control flow is still under developer preview and will change in Angular v18!

Possible variables that can be used within an @for-loop are the following:

$indexthe current index
$firsta boolean value indicating if the current element is the first one
$lasta boolean value indicating if the current element is the last one
$evena boolean value indicating if the current index is an even number
$odda boolean value indicating if the current index is an odd number
$counttotal number of elements

Deferrable views

The new and improved syntax in various places speeds up the loading of apps. Deferrable views are a further step towards improving performance, as parts of an application can be lazy-loaded.

Various triggers offer developers flexible options for controlling the loading of content:

on idlelazily load the block when the browser is not doing any heavy lifting
on immediatestart lazily loading automatically, without blocking the browser
on timer(time)delay loading with a timer
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(ref)enables you to initiate lazy loading when the user interacts with a particular element
on hover(ref)triggers lazy loading when the user hovers an element
when exprenables you to specify your own condition via a boolean expression

In addition to these triggers, deferrable views also offer the option of prefetching dependencies. Prefetching supports all the triggers mentioned above:

Deferrable views are still in developer preview in v17!

These are some of the features and new developments from Angular 17 that influence and change the workflow. Let’s now take a look at the changes that we can expect in Angular 18.

Outlook Angular 18

Route Redirects with Functions

A new function in Angular 18 is the management of redirects. Functions can now be used to specify the redirect URL within the redirectTo property of the route object. This offers more flexibility in redirection and opens up new possibilities.

New RedirectCommand

Another new feature is the introduction of the RedirectCommand class, which is used to manage NavigationExtras. This extension enables improved redirection capabilities within Guards and Resolvers and also improves maintainability and flexibility.

Zoneless applications

One of the main goals of Angular 18 is to enable applications without zone.js. This was originally only possible through Signal Components, but with Angular 18 this will also be possible without Signal Components.

This was a recap of the latest features from v17 and a preview of the release of Angular v18 which is planned for the end of May 2024. We are very excited about further features and will report on them again.

Stay tuned!

Hat dir der Beitrag gefallen?

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert