CODEWITHSUNDEEP
angularangular-material
W Kenny
W Kenny

Reputation: 2089

Click mat-checkbox programmatically by getElementById

I would like to trigger a click event in ngAfterContentInit().

Running the code below, I got the error:

ERROR TypeError: Cannot read property 'click' of null

Since I use NgFor to print out all the mat-checkbox,

I am afraid I can't use the method - ViewChild to achieve my purpose.

Component:

<div *ngFor="let item of NationlityList.NationlityList; let i = index">
  <div *ngIf="i % 6 == 0" class="row">
      <mat-checkbox id="{{'Id'+i}}" *ngIf="i + 0 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i].Nationality)"> {{ NationlityList.NationlityList[i].Nationality }} </mat-checkbox>
      <mat-checkbox id="{{'Id'+(i+1)}}" *ngIf="i + 1 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+1].Nationality)"> {{ NationlityList.NationlityList[i+1].Nationality }} </mat-checkbox>
  </div>
</div>

TS:

ngAfterContentInit() {
if (this.passedData.SelectedNationlity[0] !== 'All') {
  let element: HTMLElement = document.getElementById('Id21');
  element.click();
  }
}

Upvotes: 1

Views: 3056

Answers (1)

Orestis Zekai
Orestis Zekai

Reputation: 922

You can do this:

document.getElementById('checkboxID').setAttribute('checked','true')

Upvotes: 2

Related Questions