Signals in Angular 18 πŸ”ž, Signals cool upgrade



This content originally appeared on DEV Community and was authored by Ahmad Alhafi

She just turned 18, officially of age… now she’s grown 💪🏻

With Angular 18, we can finally escape zone.js!
Applications can now run without zone.js using zoneless change detection, and updates are fully controlled via Signals.

🦧 How to make your Angular 18 app zoneless

  1. Remove zone.js from polyfills Open angular.json and remove the “zone.js” line:

“polyfills”: [
// “zone.js” <- remove this line
]

  1. Enable Zoneless Change Detection Add provideZonelessChangeDetection to the providers in your main.ts:

import { provideZonelessChangeDetection } from ‘@angular/core’;

bootstrapApplication(AppComponent, {
providers: [provideZonelessChangeDetection()],
});

  1. Use Signals or ChangeDetectorRef for updates Without zone.js, any UI updates must be triggered either via Signals or manually using ChangeDetectorRef.

No new Signals were added here, but the key takeaway is: we’re finally free from zone.js 😋

If you’re still unsure how it works, check out this post:
https://lnkd.in/dvFG2P3d


This content originally appeared on DEV Community and was authored by Ahmad Alhafi