Angular | Programmatically set elements attribute

Question

I'm utilizing Angular Material to create an awesome web application. Please consider the following code:

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox">Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox">Checkbox 3</mat-checkbox>

The code produces three checkboxes. When the first checkbox is checked, the two others should be checked as well. If the first checkbox is not checked, the two others should function normally.

In component:

checkAll() {
  // How can I programmatically set the [checked] property here for .checkbox?
}

Andrei Tătar · Accepted Answer · 2019-01-30 13:55:34Z

2

Here's a simple solution for check all that works with any number of checkboxes. It also updates the master checkbox if you manually check all the checkboxes:

component class

get master() {
  return this.checkboxes.every(c => c.checked);
}
set master(v) {
  this.checkboxes.forEach(c => c.checked = v);
}
checkboxes = new Array(5).fill(0).map(v => ({checked: false}));

component template

<label>
  <input type="checkbox" #masterCheckbox [checked]="master" 
  (change)="master=masterCheckbox.checked">
  Check/Uncheck ALL
</label>

<ng-container *ngFor="let chk of checkboxes; let index=index">
  <br>
  <label>
    <input type="checkbox" [checked]="chk.checked" (change)="chk.checked=!chk.checked">
    Checkbox {{index}}
  </label>
</ng-container>

https://stackblitz.com/edit/checkbox-behavior?file=src%2Fapp%2Fapp.component.html

edited Jan 30, 2019 at 13:55

answered Jan 30, 2019 at 13:35

Andrei Tătar

8,34523 silver badges41 bronze badges

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

Comments

Vega · Accepted Answer · 2019-01-30 14:06:26Z

2

Here is an example of doing it:

HTML

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox [checked]="property1" class="checkbox">Checkbox 2</mat-checkbox>
<mat-checkbox [checked]="property2" class="checkbox">Checkbox 3</mat-checkbox>

Class:

  //setting to different properties gives you the choice to check them individually
  property1;
  property2;

  checkAll() { 
     // this supposes that you want to uncheck in group also, if not set them just to 'true'
     this.property1 = !this.property1; 
     this.property2 = !this.property2;
  }

Demo

edited Jan 30, 2019 at 14:06

answered Jan 30, 2019 at 13:39

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Comments

shildmaiden · Accepted Answer · 2019-01-30 13:42:00Z

1

Add a [checked] Property to the second and third mat-checkbox:

<mat-checkbox class="master" (click)='checkAll()'>Checkbox MASTER</mat-checkbox>
<mat-checkbox class="checkbox" [checked]="checkedWhenFirstIsChecked">Checkbox 2</mat-checkbox>
<mat-checkbox class="checkbox" [checked]="checkedWhenFirstIsChecked">Checkbox 3</mat-checkbox>

Initialize the 'checkedWhenFirstIsChecked' with false in your component.

And set it to true in your function:

checkedWhenFirstIsChecked: boolean = false;

checkAll() {
  this.checkedWhenFirstIsChecked = true;
}

With the [] around 'checked' the one-way binding is already created, you just have to set the value.

answered Jan 30, 2019 at 13:42

shildmaiden

80911 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular | Programmatically set elements attribute

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related