Help Using EventEmitter with Tabs Component


I am trying to use EventEmitter in a component used as the root of a tab to emit events up to the parent component and I can’t get it to work (or am even sure if it can work).

What I’m doing at the moment (in brief)

In child

export class RegisterComponent {changetab: EventEmitter<any> = new EventEmitter(false); 
 {other logic}

private register (c) {
        .subscribe(//http should be returning an error at this point
          () => {},
          (res) => {
            console.log('registered', res);//this logs to console
            this.changetab.emit(1);//putting a break point here shows there are no observers attached to this
          () => {}

In parent

    `<ion-tabs #homeTabs [selectIndex]="tabToShow" class="relative-tabs tab-bar-disable" style="height:50%;">
        <ion-tab (changetab)="tabSelect($event)" [root]="register"></ion-tab>
        <ion-tab [root]="login"></ion-tab>
export class HomePage {
  private login: any;
  private register: any;
  private tabToShow: number;

  @ViewChild('homeTabs') tabs: Tabs;

  constructor(public menu: MenuController, public navCtrl: NavController) {
      this.login = LoginComponent;
      this.register = RegisterComponent;
      this.tabToShow = 0;

  public tabSelect (tab?: number) {
    if (tab !== null) {;

I presume my issue is that I need to put the event handler on an actual instance of the register-component rather than just something which uses it, which is obviously not possible with tabs.

As you can see from the example, I am trying to get one tab to trigger the change to another tab. I understand that there are other ways of achieving this specific task but that isn’t really the point, I’m going to need to do this or something analogous to this further along the the line.

Is there some way of making this work and can anyone help?


1 Like

Did you find solution for this? i am stuck in hiding tab-container elements on tab page events.

I’m also encountering this issue, I can’t emit from a tab to either the app router or the tabs

Can you describe what you’re actually trying to achieve in non-technical terms? I’m afraid the question you’re currently asking is basically begging for assistance in creating a mass of spaghetti.

When I started out, I was attempting to use the event emitters to emit from (for example) tab 3, to the tabs or app router in order to make a change.

Having taken a step back and re-assessed, it’s clear that this can’t be done as the tabs component isn’t actually the parent of tab1, tab2 or tab3.

Instead, I’ve implemented a service to handle the communication between the components.

The goal initially was to emit from the child (tab3) to the parent (tabs). But as stated, the tabs component isn;t actually the parent and a service was the better choice.