Table of content

Feature	Description
Self closing tags	It’s a small improvement that could save you some typing
Signals
takeUntilDestroyed	A more simple version of `takeUntil`

Self closing tags

In Angular 16, you can use self-closing tags in the template. This is really useful for a components with long names.

Before

1	<app-component></app-component>

Now

1	<app-component />

Angular Signals

takeUntilDestroyed

Detail example

SSR

// main.ts
import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';

...

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

https://v17.angular.io/guide/hydration

Transition to standalone

You can use the following cli command to transit your app to standalone.

1	ng generate @angular/core:standalone

and you’ll see the following options in terminal, use the arrow key to select the options.

? Choose the type of migration: (Use arrow keys)
> Convert all components, directives and pipes to standalone
  Remove unnecessary NgModule classes
  Bootstrap the application using standalone APIs

Create new project with standalone

1	ng new --standalone

Required Inputs

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

Passing router data as component input

const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

Flexible ngOnDestroy

现在还不懂，需要继续研究。

Reference

https://blog.angular.dev/angular-v16-is-here-4d7a28ec680d

Philip

What's new in Angular 16