title: mat-checkbox check only if condition is true
body: <p>I have a user table list with <code>mat-checkbox</code>. When <code>mat-checkbox</code> is clicked, the checkbox should be checked only if a certain condition is true.</p>
  
  <p>Here in this code, I am trying to have checkbox checked only for <code>id=2</code>. But as you can see, initially when checkbox of <code>2</code> is clicked, it doesn't get checked even though <code>2</code> is added to array of elements which should be checked.</p>
  
  <p>On the other hand, when checkbox of <code>1,3 or 4</code> is clicked, they get checked.</p>
  
  <p>component.html</p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr *ngFor="let user of users; let in = index"&gt;
              &lt;td&gt;
                  &lt;mat-checkbox [ngModel]="canbeChecked(user.id)" (click)="userSelectClick(user.id)"&gt;&lt;/mat-checkbox&gt;
              &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>export class AppComponent {
  
    users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
    checked: boolean = true
    constructor() { }
    selected: any = [];
  
    canbeChecked(id): boolean {
      console.log("check " + id)
      console.log(this.selected)
      return this.selected.includes(id);
  
    }
  
    userSelectClick(id) {
  
      if (!this.selected.includes(id)) {
        if (id == 2)
          this.selected.push(id);
        console.log("select " + id)
        console.log(this.selected)
      }
      else {
        this.selected = this.selected.filter(item =&gt; item !== id)
      }
  
    }
  
  }
  </code></pre>
  
  <p>Working code: <a href="https://stackblitz.com/edit/mat-checkbox-conditional" rel="noreferrer">https://stackblitz.com/edit/mat-checkbox-conditional</a></p>