是否可以直接从模板中获取 nativeElement 引用？

Question

I want to get native host element of the mat-checkbox so I can do itemCheckbox.click() . Now, itemCheckbox is a MatCheckbox . Can I get reference to the native element directly in the template ?

  <mat-checkbox
                #itemCheckbox
                (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row)">
  </mat-checkbox>

ideally I would imagine something like this

<our-component #item="ElementRef"></our-component> 

PS. this is generic question. I know I can itemCheckbox.toggle() but the point is to get native element reference of the component in general. Also, I know I can @ViewChild given component and get native element from there, but that is not the point.

Answer 1

you can use @viewChild() for that purpose like the following:

@ViewChild('itemCheckbox') private itemCheckbox: MatCheckbox;

keep that in mind to import viewchild and MatCheckbox like this:

import { ViewChild } from '@angular/core';
import { MatCheckbox } from '@angular/material';

then you can access that in your code:

this.itemCheckbox.checked