Angular 16 Signal update doesn't update view

Question

I am testing angular 16 signals and per my understanding, when I disable zone.js and call signal.update() the view should be updated with new value. It is not. Please help me to understand why.

main.ts

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })
    .catch(err => console.error(err));

app.component.ts

@Component({
    selector: 'app-root',
    template: '
        <h1>{{ title() }}</h1>
        <button (click)="click()">Change</button>
    ',
})
export class AppComponent {
    title = signal('Hello');

    click(): void {
        this.title.update((value) => value + "!!");
    }
}

I am expecting that after button click, value of 'title' will be updated from 'Hello' to 'Hello!!'. It is not updated.

the button doesn"t update the view because your turned off ngZone — Rachid O, Jun 10 '23 at 12:32
@RachidO yes I know. But I updated signals, shouldnt it updated the view? — kkleczek, Jun 10 '23 at 12:36
the view will not update, because "click" can't work without ngZone — Rachid O, Jun 10 '23 at 12:59
@RachidO "click" is working without zonejs, my function is invoked correctly. Maybe I didn't precise my question. : why title.update() => {}) doesn't update view {{ title() }} — kkleczek, Jun 10 '23 at 13:36

Dubl · Accepted Answer · 2023-06-16T06:34:02.683

TL;DR: Because Angular still uses zone.js in order to trigger change detection.

Zone.js behind the scenes is wrapping a bunch of browser APIs in order to detect when an event happens on the page (there are specific types of events it looks for, see the Angular docs about zones for more details). It doesn't notify Angular what event exactly happened, but it will say that it is possible that some value somewhere was changed. Angular then kicks off change detection that loops through the whole component tree, checking all the components for changes. If ChangeDetectionStrategy.OnPush is enabled, then it can be more efficient, checking only the components in the tree that may have changed.

This is why you see your function execute to update the signal correctly. The missing link is that zone.js would detect that and notify Angular that something was updated in order to kick off the change detection. If you were to add a call to manually trigger change detection, then it should get your example working again.

Signals are only the first step on the path to being able to remove zone.js completely from a compatible app. There is a (now complete) RFC on Angular's GitHub repository discussing Signal-Based Components, which would be a further step towards being able to accomplish a zoneless Angular app. It will just take some time for all of the infrastructure of Angular to be changed, since zone.js is such a fundamental part of how Angular currently works.

Here is a slightly-old article that discusses more of zone.js and its role in the Angular change detection process (it is still pretty relevant).

Angular 16 Signal update doesn't update view

1 Answers1