Issue with pushing a new page from ion-tabs in ionic2

Ionic Framework ionic-v3
1

I have created a sample chat application in which when a user login the application will navigate to a tabs page.

<ion-tabs tabsPlacement="top" color="header" tabsHighlight=true>
  <ion-tab [root]="tab1" tabTitle="Chats" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab2" tabTitle="Groups" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3" tabTitle="Profile" tabIcon="contact"></ion-tab>
</ion-tabs>

Capture1
Capture1.PNG364×645 9.73 KB

  1. when I check the current active page from the tabs by console.log(this.navCtrl.getActive().name); I am getting undefined. Could you please tell me why?

  2. When I navigate to a new page by clicking the app icon from the header this.navCtrl.push('FriendsPage');. In the new page when I print the current active page name it shows the previous page name “ChatPage” instead of “FriendsPage”

    Capture
    Capture.PNG364×644 9.42 KB

Please help me with solving this issue.

Thanks and Regards
Anand Raj