CODEWITHSUNDEEP
angularangular-material
Julio César Rodríguez Pereira
Julio César Rodríguez Pereira

Reputation: 107

How can I get the value of a Angular Material element in Angular?

I have this HTML little code, one is a common HTML button and the other is an Angular Material Icon button.

<button mat-button #matbutton value="007">mat-button</button>

<button #button value="342">button</button>

I'm trying to get the value of both them in the .ts file as follows:

  @ViewChild('matinput', { static: true }) matinput: ElementRef;
  @ViewChild('button', { static: true }) button: ElementRef;

  ngAfterViewInit(){
    console.log(this.button.nativeElement.value);  
    console.log(this.matinput.nativeElement.value);
  }

I only get the value of the normal HTML button, but I can't get the value of the angular material button... How can achieve this? I tried removing "nativeElement" but didn't work either.

Thanks

Upvotes: 1

Views: 1885

Answers (1)

bjdose
bjdose

Reputation: 1309

You're using the mat-button directive, so if you want to get the elementRef of this button (MatButton) you need to explicitly declare read: ElementRef on the properties of ViewChild.

Default ViewChild is reading the element as the directive.

@ViewChild('matButton', { static: true, read: ElementRef }) matButton: ElementRef;

Resources about ViewChild:

https://angular.io/api/core/ViewChild

https://blog.angular-university.io/angular-viewchild/

Upvotes: 5

Related Questions