What’s New In Angular 17?
Angular 17: Yaay or Naay?
Angular always aims to please the developers with new versions.
This time, they have come up with Angular 17 with a new set of features that aim to elevate the developer experience, boost performance, and provide more tools for building scalable web applications.
Angular 17: A Major Leap Forward
Angular 17 was released on the 8th of November, 2023, and there are so many exciting things to look out for. Here’s a summary of the coolest features of Angular 17.
- Logo redesign
- Angular.dev
- Control flow syntax
- Deferrable views
- Signals: stable
- Dev tools
- Server-side rendering improvements
- New Lifestyle hooks
- Style and Style Urls as Strings
- Performance Improvements
- Security Improvements
Logo Redesign
Angular Team rebranded the whole look of angular by redesigning the logo. This is the first time the initial AngularJS 2012 logo has been updated.
The new Angular logo is more exciting.
Angular.dev
Along with the rebranding, the Angular Team changed their website as well.
They moved from angular.io to angular.dev. The new website contains documentation along with interactive tutorials and a “Playground feature”, where we can execute code without installing anything. It also enables online debugging.
Control Flow Syntax
Angular 17 introduced this new built-in control flow for templates, which provides a new declarative syntax of writing control flow straight into the template rather than using *ngIf, *ngFor and ngSwitch.
Let’s look at an example. We have added the below code in app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Control Flows Angular 17';
isUserAvailable: boolean = true;
}Inside we have declared a variable called isUserAvailableand assigned the value as true. Let's try to display different HTML components based on the value.
1. Traditional Method
<h1>Angular Previous Versions</h1>
<div *ngIf="isUserAvailable; else other">
User available
</div>
<ng-template #other>
User Not available
</ng-template>2. New Control Flow with Angular 17
<h1>Angular 17</h1>
@if (isUserAvailable) {
<p>User available</p>
} @else {
<p>User Not available</p>
}New control flows are similar to if-else conditions and easy to remember. Angular 17 also provides @else if control flow, which makes development easier.
Furthermore, let's look at how ngSwitch has been optimized.
1. Traditional Method
<div [ngSwitch]="userLevel">
<admin-dashboard *ngSwitchCase="admin"/>
<moderator-dashboard *ngSwitchCase="moderator"/>
<user-dashboard *ngSwitchDefault/>
</div>2. New Control Flow with Angular 17
@switch (userLevel) {
@case ('admin') { <admin-dashboard/> }
@case ('moderator') { <moderator-dashboard/> }
@default { <user-dashboard/> }
}Deferrable views
Angular 17 also introduced deferrable views using @deffer templates. Using this template we can lazy load components when a condition is met. For example, if we want to display a separate component, when “user scrolls to that section” or “in 5 seconds” we can use @deffer templates. Let’s explain the concept using an example.
@defer (when show) {
<ns-demo-component />
}
@placeholder {
<div>Something until the loading starts</div>
}
@loading (after 500ms; minimum 500ms) {
<div>Loading...</div>
}
@error {<div>Something went wrong</div>
}We have configured <ns-demo-component> it to be visible "when show". Using the @placeholder tag we can display the default value till the component loads.
We can use the @loading block to define what will be displayed till the component is loaded. If no @loading block is defined, the default placeholder will be displayed. Loading of the@defer block can be quite fast, therefore, there can be a flickering effect with the @loading block. To avoid that we can define the display duration of the @loading block using afterand minimumfields.
Using the @error block, we can display something if an error occurs.
Deferrable views contain the below triggers.
- on idle — lazy load when the browser is idle
- on immediate — lazy load immediately
- on timer() — delay loading with a timer
- on viewport
- on interaction and on interaction() — lazy load when the user interacts with a particular element
- on hover and on hover() — lazy load when the user hovers an element
Signals Are Now Stable
Angular Signals tracks how and where your state is used throughout an application. As a result, it allows the framework to optimize rendering updates.
const count = signal(0);With Angular 17, signals API has become stable. To know more about Angular Signals, read the documentation here.
Dev Tools
Angular has introduced this cool new feature of viewing, “dependency injection” in dev tools. Based on this feature, we can view the dependencies of your components in the component inspector, injector tree, dependency resolution path, and providers declared within the individual injectors.
Server-Side Rendering Improvements
Angular 17 also, brings to you the capability of Server side rendering (SSR) and static site generation (SSG). While creating a new application with ng new, developers get a prompt to enable SSR and SSG. For the already created applications, we can use the below command to enable SSR.
ng new angular-demo-application --ssrFurthermore, the SSR package has been moved from Angular Universal to the Angular/CLI repository.
To install SSR, we can use the below command.
ng add @angular/ssrNew Lifecycle Hooks
Two new lifecycle hooks have been introduced with Angular 17 which is afterRender and afterNextRender.
afterRendercan be used to register a callback which will be invoked every time the application finishes rendering while afterNextRender can be used to register a callback to be invoked the next time the application finishes rendering.
@Component({
selector: 'my-chart-cmp',
template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
@ViewChild('chart') chartRef: ElementRef;
chart: MyChart|null;
constructor() {
afterNextRender(() => {
this.chart = new MyChart(this.chartRef.nativeElement);
}, {phase: AfterRenderPhase.Write});
}
}Style and styleUrls as strings
In previous versions, Angular components support multiple stylesheets per component. If we want to point to multiple inline styles we can include them in an array. With Angular 17, the styles array has been switched to styleUrl for a simple, more logical way.
@Component({
styles: [`
...
`]
})
...@Component({
styleUrls: ['styles.css']
})...@Component({
styles: `
...
`
})
...@Component({
styleUrl: 'styles.css'
})
...
Performance Improvements
Android 17 introduces a set of performance improvements. As explained earlier, using deferrable views, we can reduce the workload of change detection. In previous versions, angular would process each element. With deferrable views, we can eliminate that process, because Angular would identify which component needs to be displayed at what time.
Furthermore, built-in control flow would significantly improve the performance. Specifically, this is applicable for @for loops.
Angular 17 also brings improvements to the compilation of TypeScript code. These improvements lead to faster build times, particularly for complex TypeScript codebases.
Security Improvements
Angular 17 focuses on, not only performance but also security. It has introduced two new improvements.
- Stricter Type Checking- By enabling type checking we can avoid runtime errors.
- Sanitization APIs- By having updated sanitization APIs, will help prevent cross-site scripting (XSS) attacks, ensuring that user input data is handled securely.
Migration
Migration to Angular 17 is supposed to be as smooth as possible. We can use ng update to upgrade the related dependencies. Angular strives to be backward compatible with older versions. Even though, there may be deprecations and breaking changes that require some adjustments during migration. The best practice is to read the documentation before upgrading to major versions. Furthermore, Angular update guide and migration tools will assist you in managing the changes.
Conclusion
With the introduction of Angular 17, the Angular Team reaffirms its position as a leading front-end framework.
Furthermore, they are already planning for the next major version and is planning to include some great features. In the next release, they plan to release Angular’s signal-based reactivity, hybrid rendering, and learning journey.
We can expect more exciting features in Angular 18, which has already been planned to be released in May 2024.
I hope you enjoyed this article. Thank you for reading!
