Angular 2 Checkbox Two Way Data Binding

You can remove .selected from saveUsername in your checkbox input since saveUsername is a boolean. Instead of [(ngModel)] use [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit: Correct Solution:

<input
  type="checkbox"
  [checked]="saveUsername"
  (change)="saveUsername = !saveUsername"/>

Update: Like @newman noticed when ngModel is used in a form it won’t work. However, you should use [ngModelOptions] attribute like (tested in Angular 7):

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

I also created an example at Stackblitz: https://stackblitz.com/edit/angular-abelrm

Leave a Comment