angular viewChild element set attribute code example

Example: angular viewchild set attribute

// If you call console.log on one of the button elements, you can see that it is an instance of ElementRef, not HTMLElement.

// So...

// Import ElementRef from @angular/core:

import {Component, ViewChild, ElementRef} from '@angular/core';
// Change the buttons type from HTMLElement to ElementRef:

@ViewChild('roundButtonOne') roundButtonOne: ElementRef;
@ViewChild('roundButtonTwo') roundButtonTwo: ElementRef;
@ViewChild('roundButtonThree') roundButtonThree: ElementRef;
// Get nativeElement from ElementRef object and then call setAttribute() / getAttribute() methods:

this.roundButtonOne.nativeElement.getAttribute('xlink:href');

this.roundButtonOne.nativeElement.setAttribute('xlink:href','#mic-small');