How to place Tabs inside Popover












0















I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.



enter image description here



I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.



tabs.html



<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>


tabs.ts



 presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}


tabPopover.html



<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>


tabPopover.ts



openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}


Help would be appreciated!










share|improve this question

























  • Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

    – SeunBincom
    Dec 31 '18 at 14:09











  • @SeunBincom: Please check the updated the post.

    – Kunal Kakkad
    Jan 1 at 5:19











  • this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

    – SeunBincom
    Jan 1 at 7:20











  • There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

    – rmalviya
    Jan 1 at 11:05











  • @SeunBincom: Its a ionic v4 app.

    – Kunal Kakkad
    Jan 2 at 6:05
















0















I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.



enter image description here



I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.



tabs.html



<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>


tabs.ts



 presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}


tabPopover.html



<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>


tabPopover.ts



openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}


Help would be appreciated!










share|improve this question

























  • Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

    – SeunBincom
    Dec 31 '18 at 14:09











  • @SeunBincom: Please check the updated the post.

    – Kunal Kakkad
    Jan 1 at 5:19











  • this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

    – SeunBincom
    Jan 1 at 7:20











  • There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

    – rmalviya
    Jan 1 at 11:05











  • @SeunBincom: Its a ionic v4 app.

    – Kunal Kakkad
    Jan 2 at 6:05














0












0








0








I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.



enter image description here



I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.



tabs.html



<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>


tabs.ts



 presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}


tabPopover.html



<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>


tabPopover.ts



openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}


Help would be appreciated!










share|improve this question
















I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.



enter image description here



I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.



tabs.html



<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>


tabs.ts



 presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}


tabPopover.html



<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>


tabPopover.ts



openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}


Help would be appreciated!







ionic-framework ionic3 angular6 ionic-tabs ionic-popover






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 2 at 12:49







Kunal Kakkad

















asked Dec 31 '18 at 6:52









Kunal KakkadKunal Kakkad

578316




578316













  • Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

    – SeunBincom
    Dec 31 '18 at 14:09











  • @SeunBincom: Please check the updated the post.

    – Kunal Kakkad
    Jan 1 at 5:19











  • this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

    – SeunBincom
    Jan 1 at 7:20











  • There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

    – rmalviya
    Jan 1 at 11:05











  • @SeunBincom: Its a ionic v4 app.

    – Kunal Kakkad
    Jan 2 at 6:05



















  • Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

    – SeunBincom
    Dec 31 '18 at 14:09











  • @SeunBincom: Please check the updated the post.

    – Kunal Kakkad
    Jan 1 at 5:19











  • this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

    – SeunBincom
    Jan 1 at 7:20











  • There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

    – rmalviya
    Jan 1 at 11:05











  • @SeunBincom: Its a ionic v4 app.

    – Kunal Kakkad
    Jan 2 at 6:05

















Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

– SeunBincom
Dec 31 '18 at 14:09





Hello, you need to update your question with your Code shows what you have implemented. i assume that you have set your routes?

– SeunBincom
Dec 31 '18 at 14:09













@SeunBincom: Please check the updated the post.

– Kunal Kakkad
Jan 1 at 5:19





@SeunBincom: Please check the updated the post.

– Kunal Kakkad
Jan 1 at 5:19













this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

– SeunBincom
Jan 1 at 7:20





this seems to be an ionic 3 app. are you building an ionic 3 or an ionic 4 app?

– SeunBincom
Jan 1 at 7:20













There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

– rmalviya
Jan 1 at 11:05





There is a limitation to this approach as ionSelect event is only emitted when the inactive tab becomes active, however in your case you would want to show popover even when the last tab is already selected.

– rmalviya
Jan 1 at 11:05













@SeunBincom: Its a ionic v4 app.

– Kunal Kakkad
Jan 2 at 6:05





@SeunBincom: Its a ionic v4 app.

– Kunal Kakkad
Jan 2 at 6:05












1 Answer
1






active

oldest

votes


















1















Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs




there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question



Step 1:



we currently have 4 tab items, we add the extra tab items we need.



<ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>


NOTE the show attribute
show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
this creates the ion-tab elements but hides them.



step 2:



we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>



page: tabs.ts



// we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef



@ViewChild('myTab') tabRef: Tabs;



presentPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

}


we need a way to reference this component (TabsPage), so we are passing it as a nav params
https://ionicframework.com/docs/api/components/popover/PopoverController/#create
https://ionicframework.com/docs/api/navigation/NavParams/#get



step 3:



page: popover.html



<button ion-item (click)="openPage(4)">
<ion-icon name="person" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage(5)">
<ion-icon name="cash" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage(6)">
<ion-icon name="settings" item-left></ion-icon>
Setting
</button>


// each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab



page: PopoverPage



// the tabs page ref
tabsPageRef: TabsPage;

constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
// recall the navpage: this from the TabsPage?
this.tabsPageRef = this.navParams.get('navpage');
}


openPage(pageName: any) {
// here, we are using the reference of the TabsPage to access the local variable tabref
this.tabsPageRef.tabRef.select(pageName)
}





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984483%2fhow-to-place-tabs-inside-popover%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1















    Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
    you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs




    there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question



    Step 1:



    we currently have 4 tab items, we add the extra tab items we need.



    <ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
    <ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
    <ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>


    NOTE the show attribute
    show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
    this creates the ion-tab elements but hides them.



    step 2:



    we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>



    page: tabs.ts



    // we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef



    @ViewChild('myTab') tabRef: Tabs;



    presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
    popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

    }


    we need a way to reference this component (TabsPage), so we are passing it as a nav params
    https://ionicframework.com/docs/api/components/popover/PopoverController/#create
    https://ionicframework.com/docs/api/navigation/NavParams/#get



    step 3:



    page: popover.html



    <button ion-item (click)="openPage(4)">
    <ion-icon name="person" item-left></ion-icon>
    Profile Page
    </button>
    <button ion-item (click)="openPage(5)">
    <ion-icon name="cash" item-left></ion-icon>
    Sales Report
    </button>
    <button ion-item (click)="openPage(6)">
    <ion-icon name="settings" item-left></ion-icon>
    Setting
    </button>


    // each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab



    page: PopoverPage



    // the tabs page ref
    tabsPageRef: TabsPage;

    constructor(
    public navCtrl: NavController,
    public navParams: NavParams
    ) {
    // recall the navpage: this from the TabsPage?
    this.tabsPageRef = this.navParams.get('navpage');
    }


    openPage(pageName: any) {
    // here, we are using the reference of the TabsPage to access the local variable tabref
    this.tabsPageRef.tabRef.select(pageName)
    }





    share|improve this answer




























      1















      Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
      you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs




      there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question



      Step 1:



      we currently have 4 tab items, we add the extra tab items we need.



      <ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
      <ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
      <ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>


      NOTE the show attribute
      show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
      this creates the ion-tab elements but hides them.



      step 2:



      we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>



      page: tabs.ts



      // we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef



      @ViewChild('myTab') tabRef: Tabs;



      presentPopover(event) {
      let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
      popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

      }


      we need a way to reference this component (TabsPage), so we are passing it as a nav params
      https://ionicframework.com/docs/api/components/popover/PopoverController/#create
      https://ionicframework.com/docs/api/navigation/NavParams/#get



      step 3:



      page: popover.html



      <button ion-item (click)="openPage(4)">
      <ion-icon name="person" item-left></ion-icon>
      Profile Page
      </button>
      <button ion-item (click)="openPage(5)">
      <ion-icon name="cash" item-left></ion-icon>
      Sales Report
      </button>
      <button ion-item (click)="openPage(6)">
      <ion-icon name="settings" item-left></ion-icon>
      Setting
      </button>


      // each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab



      page: PopoverPage



      // the tabs page ref
      tabsPageRef: TabsPage;

      constructor(
      public navCtrl: NavController,
      public navParams: NavParams
      ) {
      // recall the navpage: this from the TabsPage?
      this.tabsPageRef = this.navParams.get('navpage');
      }


      openPage(pageName: any) {
      // here, we are using the reference of the TabsPage to access the local variable tabref
      this.tabsPageRef.tabRef.select(pageName)
      }





      share|improve this answer


























        1












        1








        1








        Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
        you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs




        there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question



        Step 1:



        we currently have 4 tab items, we add the extra tab items we need.



        <ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
        <ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
        <ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>


        NOTE the show attribute
        show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
        this creates the ion-tab elements but hides them.



        step 2:



        we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>



        page: tabs.ts



        // we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef



        @ViewChild('myTab') tabRef: Tabs;



        presentPopover(event) {
        let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
        popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

        }


        we need a way to reference this component (TabsPage), so we are passing it as a nav params
        https://ionicframework.com/docs/api/components/popover/PopoverController/#create
        https://ionicframework.com/docs/api/navigation/NavParams/#get



        step 3:



        page: popover.html



        <button ion-item (click)="openPage(4)">
        <ion-icon name="person" item-left></ion-icon>
        Profile Page
        </button>
        <button ion-item (click)="openPage(5)">
        <ion-icon name="cash" item-left></ion-icon>
        Sales Report
        </button>
        <button ion-item (click)="openPage(6)">
        <ion-icon name="settings" item-left></ion-icon>
        Setting
        </button>


        // each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab



        page: PopoverPage



        // the tabs page ref
        tabsPageRef: TabsPage;

        constructor(
        public navCtrl: NavController,
        public navParams: NavParams
        ) {
        // recall the navpage: this from the TabsPage?
        this.tabsPageRef = this.navParams.get('navpage');
        }


        openPage(pageName: any) {
        // here, we are using the reference of the TabsPage to access the local variable tabref
        this.tabsPageRef.tabRef.select(pageName)
        }





        share|improve this answer














        Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
        you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs




        there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question



        Step 1:



        we currently have 4 tab items, we add the extra tab items we need.



        <ion-tab [root]="tab4Root" show= "false"  tabIcon="person"></ion-tab>
        <ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
        <ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>


        NOTE the show attribute
        show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
        this creates the ion-tab elements but hides them.



        step 2:



        we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>



        page: tabs.ts



        // we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef



        @ViewChild('myTab') tabRef: Tabs;



        presentPopover(event) {
        let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
        popover.present({ ev: { target: event.btn._elementRef.nativeElement } });

        }


        we need a way to reference this component (TabsPage), so we are passing it as a nav params
        https://ionicframework.com/docs/api/components/popover/PopoverController/#create
        https://ionicframework.com/docs/api/navigation/NavParams/#get



        step 3:



        page: popover.html



        <button ion-item (click)="openPage(4)">
        <ion-icon name="person" item-left></ion-icon>
        Profile Page
        </button>
        <button ion-item (click)="openPage(5)">
        <ion-icon name="cash" item-left></ion-icon>
        Sales Report
        </button>
        <button ion-item (click)="openPage(6)">
        <ion-icon name="settings" item-left></ion-icon>
        Setting
        </button>


        // each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab



        page: PopoverPage



        // the tabs page ref
        tabsPageRef: TabsPage;

        constructor(
        public navCtrl: NavController,
        public navParams: NavParams
        ) {
        // recall the navpage: this from the TabsPage?
        this.tabsPageRef = this.navParams.get('navpage');
        }


        openPage(pageName: any) {
        // here, we are using the reference of the TabsPage to access the local variable tabref
        this.tabsPageRef.tabRef.select(pageName)
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 2 at 19:56









        SeunBincomSeunBincom

        1666




        1666






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53984483%2fhow-to-place-tabs-inside-popover%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas