DEV Community

Cover image for ⭐Angular 16 Features ⭐
Sandeep Balachandran
Sandeep Balachandran

Posted on

⭐Angular 16 Features ⭐

#javascript #angular #beginners #webdev

Hey there,

I know I am a little late at this point. Also It has been a long since I have posted something here. So here it goes.

Version 16.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

✅ New reactivity model

✅ Angular Signals

✅ Server-side rendering and hydration

✅ Improved tooling for standalone components, directives, and pipes

✅ Advancing developer tooling

✅ Improving Developer Experience

How to update to version 16

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 16

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

In order to update your global angular,

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

What’s in this release?

✅ New reactivity model

  • As part of the v16 release Angular team share a developer preview of a brand new reactivity model for Angular which brings significant improvements to performance and developer experience
  • It’s entirely backward compatible and interoperable with the current system, and enables:
    • Better run time performance by reducing the number of computations during change detection.
    • Brings a simpler mental model for reactivity

👉 Signals

  • The Angular signals library allows you to define reactive values and express dependencies between them.
  • A signal is a value with explicit change semantics.
  • In Angular a signal is represented by a zero argument getter function returning the current signal value:
  • Signals are fundamentally read-only: we can ask for the current value and observe change notification. 
@Component({ selector: 'my-app', standalone: true, template: ` {{ fullName() }} <button (click)="setName('John')">Click</button> `, }) export class App { firstName = signal('Jane'); lastName = signal('Doe'); fullName = computed(() => `${this.firstName()} ${this.lastName()}`); constructor() { effect(() => console.log('Name changed:', this.fullName())); } setName(newName: string) { this.firstName.set(newName); } }
Enter fullscreen mode Exit fullscreen mode
  • The snippet above creates a computed value fullName, which depends on the signals firstName and lastName.
  • We also declare an effect, which callback will execute every time we change the value of any of the signals it reads — in this case fullName, which means it transitively also depends on firstName and lastName.
  • When we set the value of firstName to ”John”, the browser will log into the console: 
"Name changed: John Doe"
Enter fullscreen mode Exit fullscreen mode

✅ Server-side rendering and hydration

  • In the new full app non-destructive hydration, Angular no longer re-renders the application from scratch.
  • Instead, the framework looks up existing DOM nodes while building internal data structures and attaches event listeners to those nodes.
  • Features
    • No content flickering on a page for end users
    • Better Web Core Vitals in certain scenarios
    • Future-proof architecture that enables fine-grained code loading with primitives
    • Easy integration with existing apps
    • Incremental adoption of hydration with the ngSkipHydration attribute in templates for components performing manual DOM manipulation
  • Non-destructive hydration is still at the developer preview stage.
  • But you can enable it by adding provideClientHydration() as a provider when bootstrapping the application. 
import { bootstrapApplication, provideClientHydration, } from '@angular/platform-browser'; ... bootstrapApplication(RootCmp, { providers: [provideClientHydration()] });
Enter fullscreen mode Exit fullscreen mode
  • You can find more details on how it works in the documentation right here 👉 Hydration.

✅ Improved tooling for standalone components, directives, and pipes

  • Angular 14 started supporting standalone components, which are independent of modules.
  • Angular 16 takes this to the next level by supporting standalone project creation. 
ng new --standalone
Enter fullscreen mode Exit fullscreen mode
  • You’ll get a simpler project output without any NgModules.
  • Additionally, all the generators in the project will produce standalone directives, components, and pipes!
  • Zone.js can be configured with the new bootstrapApplication API. 
bootstrapApplication(App, { providers: [provideZoneChangeDetection({ eventCoalescing: true })] });
Enter fullscreen mode Exit fullscreen mode

✅ Advancing developer tooling

👉 Developer preview of the esbuild-based build system

  • In ng serve angular now using Vite for the development server, and esbuild powers both development and production builds
  • Angular CLI relies on Vite exclusively as a development server.
  • To support selector matching, the Angular compiler needs to maintain a dependency graph between components which requires a different compilation model than Vite.
  • You can give Vite + esbuild a try by updating your angular.json: 
... "architect": { "build": { /* Add the esbuild suffix */ "builder": "@angular-devkit/build-angular:browser-esbuild", ...
Enter fullscreen mode Exit fullscreen mode

👉 Better unit testing with Jest and Web Test Runner

  • Jest is one of the most loved testing frameworks and test runners.
  • Experimental Jest support is added with Angular 16.

  • Planning to move all the existing Karma projects to Web Test Runner in future updates.

  • You can experiment with Jest in new projects by installing Jest with

    npm install jest --save-dev

    and updating your angular.json file

{ "projects": { "my-app": { "architect": { "test": { "builder": "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } }
Enter fullscreen mode Exit fullscreen mode

More unit testing strategies can be found right here 👉 Blog Post

👉 Autocomplete imports in templates

  • The language service now allows auto-import components and pipes.
  • In v16 TypeScript 5.0 support is added, with support for ECMAScript decorators , removing the overhead of ngcc , adding support for service workers and app shell in standalone apps, expanding CSP support in the CLI

✅ Improving Developer Experience

👉 Required inputs

  • In Angular 16, you can now define input values as required.
  • You can either use the @Input decorator or the @Component decorator inputs array to define one. 
@Component(...) export class App { @Input({ required: true }) title: string = ''; }
Enter fullscreen mode Exit fullscreen mode

Passing router data as component inputs

  • Now you can pass the following data to a routing component’s inputs
    • Route data — resolvers and data properties
    • Path parameters
    • Query parameters * 
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; }
Enter fullscreen mode Exit fullscreen mode
  • You can enable this feature by using withComponentInputBinding as part of the provideRouter.

👉 CSP support for inline-styles

  • The ngCspNonce attribute is useful if you have access to server-side templating that can add the nonce both to the header and the index.html when constructing the response. 
<html> <body> <app ngCspNonce="{% nonce %}"></app> </body> </html>
Enter fullscreen mode Exit fullscreen mode

👉 Self-closing tags

  • A highly requested feature we recently implemented allows you to use self-closing tags for components in Angular templates 
<super-duper-long-component-name [prop]="someVar"/>
Enter fullscreen mode Exit fullscreen mode

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

Top comments (0)