Clarity: Outputs for child components not firing when parent component uses *clrIfOpen

[aaronfrost]

[X] bug
[ ] feature request
[ ] enhancement

Expected behavior

When I make a component to do nested dropdown menus, the clicks from inside of the sub menus fire the output on the component, which the parent component can handle.

Actual behavior

When I make a component to do nested dropdown menus, the clicks from inside of the sub menus DO fire the output on the nested menu component, BUT, because the parent component is using *clrIfOpen, the parent component's listener to the output is never triggered. If I remove the *clrIfOpen directive, it works. Or I can do an ugly hack, so that I can still get the performance benefit of *clrIfOpen without the problem I have explained above. Keep in mind, my hack is ugly.

I am not sure if I have done a good job at explaining the problem. If not, please ask more questions.

Reproduction of behavior

• Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:
  Here is a plnkr showing it broken: https://plnkr.co/edit/Bu98LC
  Here is a lame hack that I wrote to work around this issue: https://plnkr.co/edit/mcz4ok
  
  

Environment details

• Angular version: 4.x.x

• Clarity version: 0.10.10

• OS and version: OSX 10.12.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[youdz]

That's an interesting one...

I don't want to classify it as a bug yet, because we need a bit more investigation. In the meantime, for the workaround, I would say the cleanest solution is simply to have the "root" component (the one that contains the trigger) declare a provider that contains the current selection. That way your components can communicate through a locally centralized service rather than inputs/outputs: https://plnkr.co/edit/KcqTge?p=preview

We'll look into solving the input/output case as soon as we can.

[aaronfrost]

😲 I haven't ever seen anything like this. This technique of creating an on-the-fly injectable like this... is kind of cool. What is this technique called?

[youdz]

It's a typical use of non-class dependency injection tokens. It's explained pretty well here: https://angular.io/guide/dependency-injection#dependency-injection-tokens

It's very useful to declare quick and small providers everywhere and communicate through them, you end up with a cleaner application than having to chain outputs from bottom components all the way up to top components.

[zeratulmdq]

Subscribing for notifications

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.