How to access the DOM element of some external library in a parent component where it is used in Angular

user_6660796 0
Viewed 144

I need to manipulate the styling and visibility of a button that is present in one of the external library component. For better understanding below is the scenario.

parent.component.html <child-component></child-component>

child.component.html <external-component></external-component>

So the button is present in an external library component which I need to manipulate in the parent component.

Note: The button does not have any template reference variable and since it is present in external library I can not add it in its html.

Is there any way this can be done? Thanks in advance :-)

angular html
1 Answers

In the component file add the following code

import { ElementRef } from '@angular/core';

@Component({
   selector: 'app-my-contract',
   templateUrl: './my.component.html',
   styleUrls: ['./my-contract.component.css']
})
export class MbpContractComponent implements OnInit {
@ViewChild('myInput') myInputVariable: ElementRef

}

In your code you can use like

this.myInputVariable.nativeElement.disabled = true;

Or you can use any properties on that element

user_25787520
Related