Search code examples
angularcomponentsangular-components

Get access to div where attribute angular component is placed

I have an angular component defined like this

 <div [app-collapsible-column] class="col-sm-3 relatives-left-list" [direction]="'left'">

What I want to achieve is modify the class from inside the app-collapsible-column component code. I know I can get the references of template through ViewChild. However, how can I get the reference of the div on which the component is itself defined?

Solution

  • We can expose ElementRef inside app-collapsible-column component

     constructor(public ele:ElementRef){
 }

    Then inside parent component we can access div element using ViewChild something like this

    @ViewChild(CollapsibleColumn) componentRef:CollapsibleColumn;
   
ngAfterViewInit(){
  console.log(this.componentRef.ele);
}