Bug: input flickers on initial load when using [ngModel]="true" (Angular 21) (zoneless) #65444
Description
### Which @angular/* package(s) are the source of the bug?
forms, zone.js
Is this a regression?
Yes
Description
In an Angular 21 project running in zoneless mode, components bound with ngModel flicker on initialization. The flicker happens because change detection behaves differently without Angular zones.Without zoneless work normal.
Steps to reproduce:
Create a new Angular 21 project with zone.js disabled (zoneless).
Add any custom or library component like mat-checkbox that implements ControlValueAccessor and bind it using ngModel:
<mat-checkbox [ngModel]="true">
</mat-checkbox>
<mat-checkbox [ngModel]="testSignal()">
</mat-checkbox>
<mat-slide-toggle [ngModel]="true"></mat-slide-toggle>
<mat-slide-toggle [ngModel]="testSignal()"></mat-slide-toggle>
import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
import {MatCheckbox} from '@angular/material/checkbox';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSlideToggle} from '@angular/material/slide-toggle';
@Component({
selector: 'app-root',
imports: [
MatCheckbox,
FormsModule,
ReactiveFormsModule,
MatSlideToggle
],
templateUrl: './app.html',
styleUrl: './app.css',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
public test = true;
public testSignal = signal<boolean>(true);
}
Note: The issue only occurs with ngModel and without zone.js. Components work correctly with Reactive Forms and Signal Forms.
Video example bug:
https://www.loom.com/share/7f75c6b7332e403ab6b82b5f7a2981ee
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.0.0
Angular : 21.0.0
Node.js : 22.16.0
Package Manager : npm 10.9.2
Operating System : darwin arm64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.0.0 │ ^21.0.0 │
│ @angular/cdk │ 21.0.0 │ ^21.0.0 │
│ @angular/cli │ 21.0.0 │ ^21.0.0 │
│ @angular/common │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.0.0 │ ^21.0.0 │
│ @angular/core │ 21.0.0 │ ^21.0.0 │
│ @angular/forms │ 21.0.0 │ ^21.0.0 │
│ @angular/material │ 21.0.0 │ ^21.0.0 │
│ @angular/platform-browser │ 21.0.0 │ ^21.0.0 │
│ @angular/router │ 21.0.0 │ ^21.0.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.0.12 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
No response