What's New in Angular 17

What's New in Angular 17

Angular version 17 was released recently, and this sounds like an hour of rebirth for the framework, which dates back to September 2016.

A New Branding

After a few days where the Angular logo had disappeared — replaced by a question mark on social networks — the Angular team announced a new logo and a brand new documentation site.

This brand-new site brings many improvements:

• The ability to experiment with features in a sandbox
• New tutorials with the option of creating them in a sandbox
• A brand-new organisation by theme (component, form, accessibility, best practices, etc.)

The @Component Annotation Improvements

The @Component annotation has been improved. Previously, it was mandatory to pass a style array or an array of relative stylesheet paths to bind styles to components:

@Component({
selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {} 

Angular 17 introduces simplified syntax with styleUrl (singular) for single stylesheets and inline styles support.

The New Application Builder

Angular has always had different builders to build applications. There are two main types:

• Client-side rendering (CSR): The entire application is built client-side and represented in DOM format
• Server-side rendering (SSR): The application is rendered in HTML format on the server in response to navigation, then rehydrated to make it dynamic

Previously, different builders existed for each type:

• @angular-devkit/build-angular:browser for CSR applications
• @nguniversal/builders:ssr-dev-server for SSR applications

With Angular 16, a new experimental builder appeared — @angular-devkit/build-angular:browser-esbuild — using Vite for the dev-server and esbuild for the build:

• 87% gain on application build time
• 82% gain on dev-server startup

With Angular 17, a brand-new "generic" application builder handles both CSR and SSR applications. This is the biggest architectural improvement — simplifying the build toolchain dramatically for all Angular projects.

New Control Flow Syntax

Angular 17 introduces a new built-in control flow syntax as an alternative to ngIf, ngFor, and ngSwitch:

@if (condition) {
<p>Visible when true</p> } @else { <p>Visible when false</p> }
@for (item of items; track item.id) { <p>{{ item.name }}</p> } 

Originally published on LinkedIn*