Get directive of component from another component

Question

I have the following template:

<sc-list #list drawer-track> </sc-list>

<sc-drawer [drawerTrack]="list"></sc-drawer>

I need to get the host element of sc-list inside sc-drawer component using the drawer-track directive.

I was trying to use Injector or EnvironmentInjector inside sc-drawer component, but I couldn't figure out how to use it, or maybe there is another approach that I don't know.

Answer 1

When you create a directive you can indicate "exportAs"

@Directive(
{
  selector: 'drawer-track',
  exportAs: 'drawerTrack'  //<--this line
})export class DrawerTrackDirective {

}

Now, when use a template reference variable you can indicate that your variable should be this directive

<sc-list #list="drawerTrack" drawer-track> </sc-list>

(It the same, e.g. when you use ngModel and write #name="ngModel")

Now, you can inject in your drawerTrack directive the elementRef (declare as public) or the sc-list (use Optional if your directive is applied not only to a sc-list)

constructor(public elementRef:ElementRef,
            @Optional() public scList:ScListComponent){}

So you can use in .ts in your sc-drawer

console.log(this.drawerTrack.elementRef);
console.log(this.drawerTrack.scList.any-property);
//or execute a function
this.drawerTrack.scList.any-function()

NOTE: when we use ViewChild, we can use, {read:ClassName}, e.g.

@ViewChild('list',{read:DrawerTrackDirective})
                   listAsTrackDirective!:DrawerTrackDirective

And in .html

<sc-drawer [drawerTrack]="listAsTrackDirective"></sc-drawer>