Erudaki Erudaki - 7 months ago 164
TypeScript Question

Angular 2 tabset - Tabs talking to eachother

Currently in my project I have an angular2 tabset that displays other html templates like so -


<tabset class="Myclass">
<tab heading ="Page1" (select)="sendMessageToPage2(Message)"<PageOne id="0"></PageOne></tab>
<tab heading ="Page2" (select)="sendMessageToPage1(Message)"<PageTwo></PageTwo></tab>


import {PageOneComponent} from 'filespace.PageOne';
import {PageTwoComponent} from 'filespace.PageTwo';
import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

selector: 'tabs',
templateUrl: 'tabs.html',
directives: [PageOneComponent, PageTwoComponent, TAB_DIRECTIVES] })

export class tabs {

public sendMessageToPage1(message: string){ do Stuff }
public sendMessageToPage2(message: string){ do Stuff }

My question is how do I actually get my message from page 1 to page 2, or get them to share a variable. Basically I need page 1 to ether react to a change that occurs on page 2, or run some function when tabbing back to page one.


You need to either emit an event from PageOne to the tabs component and then control the other component from tabs:

  selector: 'PageOne',
  templateUrl: `<div (click)="onClick()">Click Me</div>`

export class PageOne {
    // creating EventEmitter to emit when onClick is called
    @Output() changed = new EventEmitter();
    onClick() {

OR the better way is to share a service between those two components (PageOne and PageTwo) and communicate via the service, in short tabs module provides a service in the tabs.module.ts|js and PageOne and PageTwo as the components of the tabs module have access to it (DI in angular2) and then they communicate via that service, they can publich/subscribe messages, for more information please refer to

and for publih/subscribe you can refer to: