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
|
1 2 3 4 5 6 |
// Before <div [ngSwitch]="role"> <admin *ngSwitchCase="admin"/> <moderator *ngSwitchCase="moderator"/> <user *ngSwitchDefault/> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Now @switch (role) { @case ('admin') { <admin /> } @case ('moderator') { <moderator /> } @default { <user /> } } // if-statement example @if (loggedIn) { The user is logged in } @else { The user is not logged in } |
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:
|
1 2 3 4 5 |
@for (comment of comments; track comment.id) { {{ comment.text }} } @empty { No comments } |
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:
| Variable | Description |
|---|---|
| $index | the current index |
| $first | a boolean value indicating if the current element is the first one |
| $last | a boolean value indicating if the current element is the last one |
| $even | a boolean value indicating if the current index is an even number |
| $odd | a boolean value indicating if the current index is an odd number |
| $count | total 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// In your component, you could have a list of comments that you only load when the user actually wants to see them. // With deferrable views, you can achieve this easily and declaratively in one line: @defer { <comment-list /> } // It's even possible to specify what should be displayed while the comments are loading by adding a placeholder: @placeholder { Loading comments... } // It's even possible to specify what should happen if an error occurs when loading the comments: @error { Failed to load comments. } |
Various triggers offer developers flexible options for controlling the loading of content:
| Trigger | Description |
|---|---|
| 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(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 expr | enables 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:
|
1 2 3 |
@defer (on viewport; prefetch on idle) { <comment-list /> } |
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.
|
1 2 3 4 5 6 |
// Before export const routes: Routes = [{ path: '', redirectTo: '/profile', pathMatch: 'full' }]; |
|
1 2 3 4 5 6 7 8 |
// Now with redirectTo function export const routes: Routes = [{ path: '', redirectTo: () => { const userService = inject(UserService); return userService.preferredLandingPage; // e.g. /profile or /dashboard }, }] |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
const route: Route = { path: '/articles', component: ArticleListComponent, canActivate: [() => { const router: Router = inject(Router); const urlTree: UrlTree = router.parseUrl('./comments'); return new RedirectCommand(urlTree, { skipLocationChange: true }); }], }; |
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!
