What's new in Angular 17

Overview

Feature	Description	Example	State
new output api	a more streamlined output api	old: @Output() updateParentName = new EventEmitter<string>(); new: updateParentName = output<string>(); tutorial: output	stable
Deferred view	A new mechanism of lazy load	@defer (on viewport) { <comment-list/> } @loading { Loading… } @error { Loading failed :( } @placeholder { <img src="comments-placeholder.png"> }	preview(detail)
New control flow	a new syntax for control flow	@if(condition) { Some content } else { Other content }	comments

New logo

Future looking documentation

https://www.angular.io -> https://www.angular.dev The new interactive learning experience is powered by WebContainers

Built-in Control flow

@if, @for, @switch

1. @if
2. @for
3. @switch

Benefit of new control flow

1. More ergonomic syntax that is closer to JavaScript, fewer documentation lookups.
2. Better type checking thanks to more optimal type narrowing.
3. Exists in build time which reduces runtime footprint. drop you bundle size by up to 30k.
4. Automatically available without any imports.
5. Performance improvements.

Deferrable views

deferrable views

Enable SSR in new project

From Angular 17, when you create a project with ng new, you can enable SSR by adding --ssr flag.

ng new my-app --ssr

If you didn’t provide --ssr option, Angular will ask you to choose whether .

Hydration graduate from developer preview

Hydration is now enabled by default for all applications using SSR.

Add hydration to existing project

If you have an existing project and want to add hydration, you can use the following command.

ng add @angular/ssr

New lifecycle hooks

The following lifecycle hooks are used to improve the performance of Angular’s SSR and SSG.

1. afterRender - register a callback to be invoked each time the application finishes rendering.
2. afterNextRender - register a callback to be invoked the next time the application finishes rendering.

Vite and ESBuild default for new projects

From Angular 17, when you create a new project, the default build tool will be Vite and ESBuild.

Experimental view transitions support

bootstrapApplication(App, {
  providers: [
    provideRouter(routes, withViewTransitions()),
  ]
});

Defer loading of the animation module

import { provideAnimationsAsync } from '@angular/platform-browser/animations-async';

bootstrapApplication(RootCmp, {
  providers: [provideAnimationsAsync()]
});

Input value transforms

// child.component.ts
export class ChildComponent {
  @Input() flag: boolean = true;
}

// parent.component.ts
export class ParentComponent {
  flag = true;
}

The following code will cause an error: Type “” is not assignable to type “boolean”.

<!-- parent.component.html -->
<app-child flag></app-child>

to use flag before Angular 17, you need to use the following code:

<!-- parent.component.html -->
<app-child [flag]="flag"></app-child>

From Angular 17, you can use the first format with some extra configuration in ChildComponent. In this way Angular will automatically convert the flag attribute to a boolean value.

// child.component.ts
export class ChildComponent {
  @Input({transform: booleanAttribute}) flag: boolean = true;
}

Style and styleUrls as string

You don’t need to use array for styles and styleUrls anymore.
before:

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

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

after:

@Component({
  styles: `
    ...
  `
})

@Component({
  styleUrls: 'styles.css'
})

Use fetch as backend of HttpClient

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
  ]
};