Skip to main content

Angular v16: The big update

00:04:05:69

Angular v16 has arrived with significant changes that are sure to revolutionize Angular's future, enhance its popularity, and make Angular developers' lives easier. The new version comes packed with exciting features, including:

Signals

Signals is set to be the most significant change to come to Angular 16, and will reshape the entire Angular development process by revolutionizing the way the framework detects changes. This much-needed update is long overdue and aims to fix many of the issues developers have faced in the past with the use of Zone.js. If you want to learn more about the story behind Angular Signals, be sure to check out this article.

The complete guideline for Angular Signals is available at this link.

Create standalone app schematics

The Angular CLI's powerful schematics now allow you to convert your components, pipes, and directives to standalone ones. With app schematics, you can generate a complete standalone app. These schematics can also remove unnecessary ngModules after migration. As a result, the newly generated app code is lighter, without conf files from v15 improvements and with a light app bootstrapping thanks to the standalone feature.

javascript
...
bootstrapApplication(App, {
  providers: [provideHttpClient(), importProvidersFrom(FormsModule)],
}).catch((err) => console.error(err));

Esbuild dev-server

Experimental support for ng build using esbuild is already available. With v16 the tooling team has made some improvements to the Development Server (in developer preview). Now, you can runng serve with esbuild.

To check it out, change @angular-devkit/build-angular:browser to @angular-devkit/build-angular:browser-esbuild.

Jest support

Jest is a widely used and highly regarded testing tool among developers. Although Karma is the default tool for Angular, the latest version of Angular (v16) includes support for Jest in developer preview, which is significant news.

Required inputs

It is now possible to ensure that a component or directive is used with its required inputs without any runtime overhead. If the inputs are not provided, a compile-time error will be generated.

javascript
@Input({required: true}) firstInput: string; // Required
@Input() secondInput: string; // Not required

Non-destructive hydration support

In order to improve the user experience, non-destructive hydration support has been implemented. After the browser receives the rendered markup from the server and parses it as a Document Object Model (DOM), Angular will traverse the structure, add event listeners, and create internal data structures. This allows the application to become interactive without requiring a re-rendering process, which fixes the issue of encountering a "flicker" with Angular Universal.

Bind route data, path params, and query params to inputs

This feature is excellent and practical. It will definitely make life easier for developers by reducing code complexity. We can take advantage of the functional guard feature and set component inputs directly from there, which is a great benefit.

javascript
// Add the withComponentInputBinding feature to the provideRouter method.
providers: [
  provideRouter(appRoutes, withComponentInputBinding()),
]

// Update the component to have an Input matching the name of the parameter.
@Input()
set id(heroId: string) {
  this.hero$ = this.service.getHero(heroId);
}

mapToCanActivate helper function

In Angular 16, class guards are deprecated and Angular provides a function helper to make it easy to switch to function without having to remove existing class guards.

javascript
const route: Route = {
  path: 'dashboard',
  canActivate: mapToCanActivate([AdminGuard]),
};

DestroyRef & takeUntilDestroyed

Another feature that was shipped with v16 is DestroyRef and takeUntilDestoryed, which enables more flexibility when you'd like to unsubscribe.

javascript
...
obs$: Observable<SomeType>;
const subscripion = obs$.subscribe(...);
javascript
inject(DestoryRef).onDestroy(() => subscription.unsubscribe());

API to provide CSP nonce for inline stylesheets

Many enterprises are concerned with inlining scripts for security reasons. This is sometimes flagged as insecure and unsafe. This feature will help you to specify and announce your content security policy for inline styles.

javascript
// Standalone version
...
bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  ]}
});

A lot of other great features I didn't mention above to make the article light, but they are available too in v16. Here is a quick list:

  • Reuse server-generated component styles
  • TS 5.0 support (Non-experimental decorators support)
  • NgTemplateOutlet strict type-checking
  • ProvideServerRendering for server-side standalone apps
  • Improvements to NgOptimizedImage by enabling images to fit within their parent container rather than having explicit dimensions
  • Streamline standalone import through Language service
  • Improvement in the documentation and Material CDK components accessibility
  • Angular team is working closely with the Material Design team to make Angular Material the referenced material design implementation for the Web

That's it for this blog post! We hope this introduction to some of the new features in Angular 16 has been helpful. Keep exploring and experimenting with Angular 16 to see how it can improve your development process and deliver better results. Stay tuned for more exciting updates and news on Angular development!

Newesletter
Subscribe to get monthly updates with new articles