0

I have a child component 'my-component' which is wrapped by a Directive 'MyDirective' , I need to emit an event to parent directive from the child component, I know how to do it for parent component using @Output but no luck with directive. 

<div myDirective >
    <my-component></my-component>
</div>

Any idea?

Mark Timothy
  • 1,784
  • 5
  • 19
  • 30

1 Answers1

3

One approach is to use a template variable and reference it in an event handler:

<div myDirective #mydir>
    <my-component (someEvent)="mydir.someMethod()"></my-component>
</div>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks a lot for this solution, Is there any other approach if myDirective is a structural directive ? – Mark Timothy Jun 13 '16 at 05:23
  • Hmm, I guess I would need a concrete example. Can you create a Plunker that demonstrates what you try to accomplish? You could also use `dispatchEvent()` to fire a DOM event. DOM events bubble and you can listen to it using `
    `. There are often many ways to skin a cat ;-) It usually depends on the details what approach is a better fit.
     – Günter Zöchbauer Jun 13 '16 at 05:27
  • my-component has two methods, up() and down(), say if someone clicks on the 3rd my-component, I want to call show() of 3rd my-component and call hide() of all other my-component components, via myDirective directive. – Mark Timothy Jun 13 '16 at 18:25
  • ` – Günter Zöchbauer Jun 13 '16 at 18:28
  • Thanks for this suggestion but this is not the solution I'm after, there must be a structural directive, everything should handled within that directive, my-component should emit an event.. – Mark Timothy Jun 13 '16 at 18:56
  • 1
    Please add the code to your question that demonstrates what you try to accomplish. "structural directive" isn't really information that I can worke with. – Günter Zöchbauer Jun 13 '16 at 19:22