How to place Tabs inside Popover
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.
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
|
show 10 more comments
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.
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
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 asionSelect
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
|
show 10 more comments
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.
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
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.
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
ionic-framework ionic3 angular6 ionic-tabs ionic-popover
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 asionSelect
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
|
show 10 more comments
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 asionSelect
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
|
show 10 more comments
1 Answer
1
active
oldest
votes
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)
}
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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)
}
add a comment |
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)
}
add a comment |
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)
}
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)
}
answered Jan 2 at 19:56
SeunBincomSeunBincom
1666
1666
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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