-1

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.

Antoniossss
  • 31,590
  • 6
  • 57
  • 99
  • Does this answer your question? [How can I select an element in a component template?](https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-template) – Giannis Mar 08 '21 at 14:54
  • Unless I have to read between the line and read it as "no/cannot be done" than maybe. – Antoniossss Mar 08 '21 at 16:50

1 Answers1

-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
Hossein Mousavi
  • 3,118
  • 3
  • 16
  • 35
  • This is offtopic - the question is how to get it directly - ergo without additional code in the component definition. – Antoniossss Mar 06 '21 at 16:36