How to access the host component from a directive ?

[frankpepermans]

According to the change log (https://github.com/angular/angular/blob/master/CHANGELOG.md),
AppViewManager is renamed into ViewUtils and is a mere private utility service.

However, I was using AppViewManager.getComponent to obtain a Component reference from an ElementRef before, how would I do this now?

What I need to achieve is the following:

• I have a Component with a selector (say: selector my-component)
• A directive that can be placed upon Components (my-directive)

In HTML, it looks as following
<my-component my-directive></my-component>

From my-directive, I need to have a reference to the my-component Component instance.

If there is another (better) way of doing this, I'm happy to adapt my code

[tbosch]

You could just inject that component into the directive.

On Wed, Apr 27, 2016 at 4:34 AM Frank Pepermans notifications@github.com
wrote:

According to the change log (
https://github.com/angular/angular/blob/master/CHANGELOG.md),
AppViewManager is renamed into ViewUtils and is a mere private utility
service.

However, I was using AppViewManager.getComponent to obtain a Component
reference from an ElementRef before, how would I do this now?

What I need to achieve is the following:

• I have a Component with a selector (say: selector my-component)
• A directive that can be placed upon Components (my-directive)

In HTML, it looks as following

From my-directive, I need to have a reference to the my-component
Component instance.

If there is another (better) way of doing this, I'm happy to adapt my code

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#8277

[frankpepermans]

How would that work?

The component could be anything really, or should in that case the component resolve a provider with its own instance as value, so that the directive can inject it dynamically?

[zoechi]

@tbosch I think that would only work when the type is statically known by the directive but if the directive is added to different components, how would one inject it?

[frankpepermans]

@tbosch can you comment an alternative? If getting a component from an ElementRef will be dropped, let me know so I can start reworking my solution.

[bennylut]

Any workaround yet? I have a directive that assumes that the host component will have some specific interface. Without this feature (or some workaround) I will have to develop this directive for each component that implements this interface (which is what I will do if no other option)..

[CaptainCodeman]

If the component has to be static, doesn't it kind of defeat the whole point of directives - why wouldn't you just move whatever the directive does right into the known component?

[bennylut]

@CaptainCodeman, The idea was that instead of repeating the implementation of the same functionality in every component that follows a specific interface, I would have a directive that add this functionality.

Here is a simplified example:
Say I have a selection-info component that is just a simple panel that display information about some selected data.
Now I have three components: list-view, tree-view and combo-box, each of these components has the following properties: selection:T, selectionChange:EventEmitter and valueToString: (T)=>string,
in the previous version I could write a simple directive track-selection that receive an instance of selection-info as input, and take care of binding all the needed properties and even supply some additional services for debugging. In the new version it of course still possible but in a less elegant way in my eyes.

This is of course a relatively simplified scenario but I hope it will be able to show the rational behind receiving the component in a directive without actually knowing it exact class but only it interface.

[CaptainCodeman]

Yes, that is what a directive is supposed to do - add behavior to whatever component it's attached to.

If that can no longer be done then it makes them kind of pointless - the behavior could be moved to a class that is pulled into each component instead (if things have to be statically defined).

[bennylut]

@CaptainCodeman right, for now this is what I will do. But I hope that the angular team will provide an alternative as the directive approach was much more elegant..

[frankpepermans]

This is exactly what I've been using directives for, a way to elegantly allow composition and enhance components.

In my case state management, the component must implement a certain interface, the directive asserts that the component indeed implements it and then does its thing.

I do hope this will still be possible :)

[dqweek]

I have same issue described.
I have found a dirty workaround, till official fix will be provided.

This code works for me:

@Directive({
    selector: 'foo'
})
class FooDirective
{
   constructor(private _view: ViewContainerRef) {
  }
  ngOnInit() {
      let component = (<any>this._view)._element.component

     //TODO: add initialization code here
 }
}

explanation:
AppElement initialized with component instance on compilation.
AppElement is private to angular, so we can't DI it.
Fortunately ViewContainerRef has a reference to it on initialization (it is private).

it is a short run fix, till angular team provide better solution.

[zoechi]

This doesn't work for Dart though because in Dart access to private members is effectively prevented.

[jpsfs]

Hi,

@tbosch this is a feature needed by some folks (including myself) as you can see on StackOverflow:
http://stackoverflow.com/questions/31748575/how-to-access-the-component-on-a-angular2-directive/

Best,
José

[syndicatedshannon]

We attempted to use this today, but as part of a workaround for a workaround for another need. The use-case may still be relevant, so I'll describe it briefly.

Our hierarchical tree needs to Observe the result of a late-determined function, displaying resulting children. However, an Angular 2 function in a view, even one returning an Observable piped to async, never settles. To work-around, we passed a function reference from the view instead, which also required the view-containing component's context.