Angular 6 - Call function in immediate parent component, not page component

Question

I am using angular 6 to create a tabs module. I have split it up into two components, tab bar and a tab.

  <tab-bar>
    <tab (tabSelected)="selectTab(1)"></tab>
    <tab (tabSelected)="selectTab(2)"></tab>
    <tab (tabSelected)="selectTab(3)"></tab>
  </tab-bar>

When a tab is clicked it emits tabSelected which should then trigger selectTab within the tab bar component. The issue i have is that tabSelected attempts to trigger within the page module instead of within the tab-bar module (its immediate parent).

I am hoping somebody may know what I am doing wrong here?

You've got to put `tab` components in `tab-bar` template. – korteee Sep 05 '18 at 14:42 — korteee, Sep 05 '18 at 14:42
https://angular.io/guide/component-interaction – itdoesntwork Sep 05 '18 at 14:45 — itdoesntwork, Sep 05 '18 at 14:45

score 0 · Answer 1 · answered Sep 05 '18 at 14:48

At the moment it seems that after click it tries to call selectTab method on component where all provided code is located. I assume that you need to call selectTab which exists on tap-bar component. It means that you need to place your tabs inside tapbar component template.

Your tapbar.component.html should include this:

<tab (tabSelected)="selectTab(1)"></tab>
<tab (tabSelected)="selectTab(2)"></tab>
<tab (tabSelected)="selectTab(3)"></tab>

And in the place, where you want to have your tabs:

<tab-bar></tap-bar>

score 0 · Answer 2 · answered Sep 05 '18 at 16:20

If you are sure you want exactly the behaviour you described (not moving the tabs to tab-bar component), you can simply export your component / directive reference to the template:

tab-bar.component.ts

@Component({
   ...
   exportAs: 'tabBar'
})

Then in your template use this exported reference as a local template variable:

<tab-bar #tabBar="tabBar">
  <tab (tabSelected)="tabBar.selectTab(1)"></tab>
  <tab (tabSelected)="tabBar.selectTab(2)"></tab>
  <tab (tabSelected)="tabBar.selectTab(3)"></tab>
</tab-bar>

Angular 6 - Call function in immediate parent component, not page component

2 Answers2