How do I listen to a ContentChild event without hooking up via template?

Question

I need to listen for an event from an array of tab components. These tabs emit "onMinimized" however I would rather hook up to these events in one line of code than entering (onMinimized)="hide" for each tab component entry in the template. There is an array of ContentChildren that I have which I can loop through.

I want to do something similar to has follows in the parent:

@ContentChildren(TabComponent) tabs: QueryList<TabComponent>; ... ngAfterContentInit() { this.tabs.map((t: TabComponent) => { t.addEventListener("onMinimized", this.hide); }); } hide() { // hide tabs }

Thoughts?

Is onMinimized is a custom event emitter? cuz then you can subscribe to it in code. a question though - since tabs is an array, aren't you looping through that array to create the TabComponents? or are you creating the tabs a different way? — snorkpete
– snorkpete, Commented Apr 24, 2017 at 19:32
Each tab is defined in the template (though they could be in an array I suppose). How do I create an event listener to an angular "output" of a ContentChild via a ContentChild reference? — ktamlyn
– ktamlyn, Commented Apr 24, 2017 at 20:32
Found this, but its not exactly what I'm looking for. stackoverflow.com/questions/37746058/… — ktamlyn
– ktamlyn, Commented Apr 24, 2017 at 20:43

ktamlyn · Accepted Answer · 2017-04-24 22:39:46Z

Figured it out after some trial and error.

 ngAfterContentInit() { this.tabs.map((t: TabComponent) => { t.minimizeTab.subscribe(() => { this.hide(); }) }); }

The way to approach the problem was to consider that the component had a property which was an EventEmitter (just like all angular Outputs). EventEmitters are observables, so you can simply subscribe to the stream of events.

Collectives™ on Stack Overflow

How do I listen to a ContentChild event without hooking up via template?

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related