Angular Material Checkbox Two-Way binding

Question

I have a question on how two-way binding work in Angular Material checkbox.

This is HTML template from app.component.html:

<div>
  <div *ngFor="let data of testData">
      <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

And this is the component (app.component.ts):

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  testData: TestData[];

  ngOnInit() {
    this.testData = [];

    this.testData.push({
      label: 'testData1',
      isActive: false
    });

    this.testData.push({
      label: 'testData2',
      isActive: false
    });
  }

  handleData(data: TestData) {
    console.log(data.isActive);
    data.isActive = false;
  }
}

export class TestData {
  label: string;
  isActive: boolean;
}

All the checkboxes are unchecked by default. When I click a checkbox for the first time, the data parameter in the handleData handler receives true in data.isActive. I set this to false afterwards. The corresponding labels are never changed (they are always false). But I also expect for a checkbox never be checked as well. But it does is checked. Why this happens?

UPDATED I've just added the 'Results' section that contains checkboxes that reflect the ones above:

<div>
  <div *ngFor="let data of testData">
      <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

<h2 class="example-h2">Result</h2>

<div>
  <div *ngFor="let data of testData">
    <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

Unlike their neighbours above they are never checked.

Martin Parenteau · Accepted Answer · 2018-09-29 16:49:31Z

4

The value may be reset too quickly, when Angular has not completed the change detection cycle triggered by the click. It works if we reset the value asynchronously with setTimeout (see this stackblitz):

handleData(data: TestData) {
  console.log(data.isActive);
  setTimeout(() => {
    data.isActive = false;
  });
}

or if we call ChangeDetectofRef.detectChanges() before resetting the value (see this stackblitz):

handleData(data: TestData) {
  console.log(data.isActive);
  this.changeDetectorRef.detectChanges();
  data.isActive = false;
}

edited Sep 29, 2018 at 16:49

answered Sep 29, 2018 at 15:58

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sergei Zhylinski Over a year ago

It work with my example too. Is it possible, for example, to subscribe to angular change detector so as not to be dependant on a timeout?

Martin Parenteau Over a year ago

I tried with ChangeDetectorRef.detectChanges first but it does not appear to work. See this stackblitz.

Martin Parenteau Over a year ago

Oh but I found that it does work if we call it before resetting the value. I updated my answer.

Chandan Kumar Over a year ago

You are the greatest!

Collectives™ on Stack Overflow

Angular Material Checkbox Two-Way binding

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related