Navigating from one ionic tabs page to another ionic tabs page loads both tabbed pages with second tab inside first tabAccessing Component a from component b and setting its propertiesno provider for BarcodeScannerNot able to get storage varialbe on another class app.component.ts in IONICIonic 4 how to navigate from tab page to non-tab page keeping tab?Tabs data is not loading dynamic Data in ionic 4Deep Navigation inside Specific Tab for Dynamic content Ionic 4ionic native-serial returns device not foundNavigation from modal page to another page in ionic 4Use variable from one page in another - IonicProgramatic navigation issue from one ion-tab to another

Why Is Death Allowed In the Matrix?

New order #4: World

"which" command doesn't work / path of Safari?

Can an x86 CPU running in real mode be considered to be basically an 8086 CPU?

Compute hash value according to multiplication method

Download, install and reboot computer at night if needed

Are tax years 2016 & 2017 back taxes deductible for tax year 2018?

Why are only specific transaction types accepted into the mempool?

How long does it take to type this?

Why has Russell's definition of numbers using equivalence classes been finally abandoned? ( If it has actually been abandoned).

Patience, young "Padovan"

Is the month field really deprecated?

Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?

How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?

How can bays and straits be determined in a procedurally generated map?

How does one intimidate enemies without having the capacity for violence?

"You are your self first supporter", a more proper way to say it

How to report a triplet of septets in NMR tabulation?

Is it possible to make sharp wind that can cut stuff from afar?

Email Account under attack (really) - anything I can do?

What are these boxed doors outside store fronts in New York?

Japan - Plan around max visa duration

Accidentally leaked the solution to an assignment, what to do now? (I'm the prof)

Can I make popcorn with any corn?



Navigating from one ionic tabs page to another ionic tabs page loads both tabbed pages with second tab inside first tab


Accessing Component a from component b and setting its propertiesno provider for BarcodeScannerNot able to get storage varialbe on another class app.component.ts in IONICIonic 4 how to navigate from tab page to non-tab page keeping tab?Tabs data is not loading dynamic Data in ionic 4Deep Navigation inside Specific Tab for Dynamic content Ionic 4ionic native-serial returns device not foundNavigation from modal page to another page in ionic 4Use variable from one page in another - IonicProgramatic navigation issue from one ion-tab to another






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















I have two pages. The first one.



import Component, ViewChild from '@angular/core';
import NavController, NavParams, Tabs from 'ionic-angular';
import SharedmethodsProvider from '../../providers/sharedmethods/sharedmethods';


@Component(
selector: 'page-courses-dashboard',
templateUrl: 'courses-dashboard.html',
)
export class CoursesDashboardPage
@ViewChild('dashboardTabs') tabRef: Tabs;

currentCourses: any = 'CoursesDashboardCurrentPage';
featuredCourses: any = 'CoursesDashboardFeaturedPage';
upcomingCourses: any = 'CoursesDashboardUpcomingPage';
pastCourses: any = 'CoursesDashboardPastPage';

constructor(public navCtrl: NavController, public navParams: NavParams,public sharedmethods: SharedmethodsProvider)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardPage');


ionViewDidEnter()
this.tabRef.select(0);





And the view for it is



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Courses</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #dashboardTabs>
<ion-tab [root]="currentCourses" tabTitle="Current" tabIcon="infinite"></ion-tab>
<ion-tab [root]="featuredCourses" tabTitle="Featured" tabIcon="star"></ion-tab>
<ion-tab [root]="upcomingCourses" tabTitle="Upcoming" tabIcon="trending-up"></ion-tab>
<ion-tab [root]="pastCourses" tabTitle="Past" tabIcon="time"></ion-tab>
</ion-tabs>
</ion-content>


One of the tabs that are displayed in there is



import Component from '@angular/core';
import IonicPage, NavController, NavParams from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-courses-dashboard-current',
templateUrl: 'courses-dashboard-current.html',
)
export class CoursesDashboardCurrentPage

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardCurrentPage');


viewCourseDetails()
this.navCtrl.push('CourseViewPage');





The CoursViewPage is another tabs page.



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Course Details</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #courseViewTabs>
<ion-tab [root]="overview" tabTitle="Overview" tabIcon="infinite">Overview</ion-tab>
<ion-tab [root]="lessons" tabTitle="Lessons" tabIcon="infinite">Lessons</ion-tab>
<ion-tab [root]="exercises" tabTitle="Exercises" tabIcon="infinite">Excercises</ion-tab>
<ion-tab [root]="assessments" tabTitle="Assessments" tabIcon="infinite">Assessments</ion-tab>
<ion-tab [root]="discussions" tabTitle="Discussions" tabIcon="infinite">Discussions</ion-tab>
</ion-tabs>
</ion-content>


and the view is here



import Component, ViewChild from '@angular/core';
import IonicPage, NavController, NavParams, Tabs from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-course-view',
templateUrl: 'course-view.html',
)
export class CourseViewPage
@ViewChild('courseViewTabs') tabRef: Tabs;

overview: any = 'CourseViewOverviewPage';
lessons: any = 'CourseViewLessonsPage';
exercises: any = 'CourseViewDiscussionsPage';
assessments: any = 'CourseViewAssessmentsPage';
discussions: any = 'CourseViewDiscussionsPage';

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CourseViewPage');


ionViewDidEnter()
this.tabRef.select(0);





The result is below.enter image description here



How do I ensure that the second tab isn't loaded inside the first one? Also, it is important to note that the first CoursesDashboardPage isn't lazy loaded but all the tabbed pages are lazy loaded. Any help will be greatly appreciated.



ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.3
@ionic/app-scripts : 3.2.3










share|improve this question






















  • there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

    – xuemind
    Mar 8 at 5:51

















0















I have two pages. The first one.



import Component, ViewChild from '@angular/core';
import NavController, NavParams, Tabs from 'ionic-angular';
import SharedmethodsProvider from '../../providers/sharedmethods/sharedmethods';


@Component(
selector: 'page-courses-dashboard',
templateUrl: 'courses-dashboard.html',
)
export class CoursesDashboardPage
@ViewChild('dashboardTabs') tabRef: Tabs;

currentCourses: any = 'CoursesDashboardCurrentPage';
featuredCourses: any = 'CoursesDashboardFeaturedPage';
upcomingCourses: any = 'CoursesDashboardUpcomingPage';
pastCourses: any = 'CoursesDashboardPastPage';

constructor(public navCtrl: NavController, public navParams: NavParams,public sharedmethods: SharedmethodsProvider)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardPage');


ionViewDidEnter()
this.tabRef.select(0);





And the view for it is



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Courses</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #dashboardTabs>
<ion-tab [root]="currentCourses" tabTitle="Current" tabIcon="infinite"></ion-tab>
<ion-tab [root]="featuredCourses" tabTitle="Featured" tabIcon="star"></ion-tab>
<ion-tab [root]="upcomingCourses" tabTitle="Upcoming" tabIcon="trending-up"></ion-tab>
<ion-tab [root]="pastCourses" tabTitle="Past" tabIcon="time"></ion-tab>
</ion-tabs>
</ion-content>


One of the tabs that are displayed in there is



import Component from '@angular/core';
import IonicPage, NavController, NavParams from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-courses-dashboard-current',
templateUrl: 'courses-dashboard-current.html',
)
export class CoursesDashboardCurrentPage

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardCurrentPage');


viewCourseDetails()
this.navCtrl.push('CourseViewPage');





The CoursViewPage is another tabs page.



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Course Details</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #courseViewTabs>
<ion-tab [root]="overview" tabTitle="Overview" tabIcon="infinite">Overview</ion-tab>
<ion-tab [root]="lessons" tabTitle="Lessons" tabIcon="infinite">Lessons</ion-tab>
<ion-tab [root]="exercises" tabTitle="Exercises" tabIcon="infinite">Excercises</ion-tab>
<ion-tab [root]="assessments" tabTitle="Assessments" tabIcon="infinite">Assessments</ion-tab>
<ion-tab [root]="discussions" tabTitle="Discussions" tabIcon="infinite">Discussions</ion-tab>
</ion-tabs>
</ion-content>


and the view is here



import Component, ViewChild from '@angular/core';
import IonicPage, NavController, NavParams, Tabs from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-course-view',
templateUrl: 'course-view.html',
)
export class CourseViewPage
@ViewChild('courseViewTabs') tabRef: Tabs;

overview: any = 'CourseViewOverviewPage';
lessons: any = 'CourseViewLessonsPage';
exercises: any = 'CourseViewDiscussionsPage';
assessments: any = 'CourseViewAssessmentsPage';
discussions: any = 'CourseViewDiscussionsPage';

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CourseViewPage');


ionViewDidEnter()
this.tabRef.select(0);





The result is below.enter image description here



How do I ensure that the second tab isn't loaded inside the first one? Also, it is important to note that the first CoursesDashboardPage isn't lazy loaded but all the tabbed pages are lazy loaded. Any help will be greatly appreciated.



ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.3
@ionic/app-scripts : 3.2.3










share|improve this question






















  • there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

    – xuemind
    Mar 8 at 5:51













0












0








0








I have two pages. The first one.



import Component, ViewChild from '@angular/core';
import NavController, NavParams, Tabs from 'ionic-angular';
import SharedmethodsProvider from '../../providers/sharedmethods/sharedmethods';


@Component(
selector: 'page-courses-dashboard',
templateUrl: 'courses-dashboard.html',
)
export class CoursesDashboardPage
@ViewChild('dashboardTabs') tabRef: Tabs;

currentCourses: any = 'CoursesDashboardCurrentPage';
featuredCourses: any = 'CoursesDashboardFeaturedPage';
upcomingCourses: any = 'CoursesDashboardUpcomingPage';
pastCourses: any = 'CoursesDashboardPastPage';

constructor(public navCtrl: NavController, public navParams: NavParams,public sharedmethods: SharedmethodsProvider)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardPage');


ionViewDidEnter()
this.tabRef.select(0);





And the view for it is



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Courses</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #dashboardTabs>
<ion-tab [root]="currentCourses" tabTitle="Current" tabIcon="infinite"></ion-tab>
<ion-tab [root]="featuredCourses" tabTitle="Featured" tabIcon="star"></ion-tab>
<ion-tab [root]="upcomingCourses" tabTitle="Upcoming" tabIcon="trending-up"></ion-tab>
<ion-tab [root]="pastCourses" tabTitle="Past" tabIcon="time"></ion-tab>
</ion-tabs>
</ion-content>


One of the tabs that are displayed in there is



import Component from '@angular/core';
import IonicPage, NavController, NavParams from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-courses-dashboard-current',
templateUrl: 'courses-dashboard-current.html',
)
export class CoursesDashboardCurrentPage

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardCurrentPage');


viewCourseDetails()
this.navCtrl.push('CourseViewPage');





The CoursViewPage is another tabs page.



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Course Details</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #courseViewTabs>
<ion-tab [root]="overview" tabTitle="Overview" tabIcon="infinite">Overview</ion-tab>
<ion-tab [root]="lessons" tabTitle="Lessons" tabIcon="infinite">Lessons</ion-tab>
<ion-tab [root]="exercises" tabTitle="Exercises" tabIcon="infinite">Excercises</ion-tab>
<ion-tab [root]="assessments" tabTitle="Assessments" tabIcon="infinite">Assessments</ion-tab>
<ion-tab [root]="discussions" tabTitle="Discussions" tabIcon="infinite">Discussions</ion-tab>
</ion-tabs>
</ion-content>


and the view is here



import Component, ViewChild from '@angular/core';
import IonicPage, NavController, NavParams, Tabs from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-course-view',
templateUrl: 'course-view.html',
)
export class CourseViewPage
@ViewChild('courseViewTabs') tabRef: Tabs;

overview: any = 'CourseViewOverviewPage';
lessons: any = 'CourseViewLessonsPage';
exercises: any = 'CourseViewDiscussionsPage';
assessments: any = 'CourseViewAssessmentsPage';
discussions: any = 'CourseViewDiscussionsPage';

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CourseViewPage');


ionViewDidEnter()
this.tabRef.select(0);





The result is below.enter image description here



How do I ensure that the second tab isn't loaded inside the first one? Also, it is important to note that the first CoursesDashboardPage isn't lazy loaded but all the tabbed pages are lazy loaded. Any help will be greatly appreciated.



ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.3
@ionic/app-scripts : 3.2.3










share|improve this question














I have two pages. The first one.



import Component, ViewChild from '@angular/core';
import NavController, NavParams, Tabs from 'ionic-angular';
import SharedmethodsProvider from '../../providers/sharedmethods/sharedmethods';


@Component(
selector: 'page-courses-dashboard',
templateUrl: 'courses-dashboard.html',
)
export class CoursesDashboardPage
@ViewChild('dashboardTabs') tabRef: Tabs;

currentCourses: any = 'CoursesDashboardCurrentPage';
featuredCourses: any = 'CoursesDashboardFeaturedPage';
upcomingCourses: any = 'CoursesDashboardUpcomingPage';
pastCourses: any = 'CoursesDashboardPastPage';

constructor(public navCtrl: NavController, public navParams: NavParams,public sharedmethods: SharedmethodsProvider)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardPage');


ionViewDidEnter()
this.tabRef.select(0);





And the view for it is



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Courses</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #dashboardTabs>
<ion-tab [root]="currentCourses" tabTitle="Current" tabIcon="infinite"></ion-tab>
<ion-tab [root]="featuredCourses" tabTitle="Featured" tabIcon="star"></ion-tab>
<ion-tab [root]="upcomingCourses" tabTitle="Upcoming" tabIcon="trending-up"></ion-tab>
<ion-tab [root]="pastCourses" tabTitle="Past" tabIcon="time"></ion-tab>
</ion-tabs>
</ion-content>


One of the tabs that are displayed in there is



import Component from '@angular/core';
import IonicPage, NavController, NavParams from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-courses-dashboard-current',
templateUrl: 'courses-dashboard-current.html',
)
export class CoursesDashboardCurrentPage

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CoursesDashboardCurrentPage');


viewCourseDetails()
this.navCtrl.push('CourseViewPage');





The CoursViewPage is another tabs page.



<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Course Details</ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-tabs #courseViewTabs>
<ion-tab [root]="overview" tabTitle="Overview" tabIcon="infinite">Overview</ion-tab>
<ion-tab [root]="lessons" tabTitle="Lessons" tabIcon="infinite">Lessons</ion-tab>
<ion-tab [root]="exercises" tabTitle="Exercises" tabIcon="infinite">Excercises</ion-tab>
<ion-tab [root]="assessments" tabTitle="Assessments" tabIcon="infinite">Assessments</ion-tab>
<ion-tab [root]="discussions" tabTitle="Discussions" tabIcon="infinite">Discussions</ion-tab>
</ion-tabs>
</ion-content>


and the view is here



import Component, ViewChild from '@angular/core';
import IonicPage, NavController, NavParams, Tabs from 'ionic-angular';

@IonicPage()
@Component(
selector: 'page-course-view',
templateUrl: 'course-view.html',
)
export class CourseViewPage
@ViewChild('courseViewTabs') tabRef: Tabs;

overview: any = 'CourseViewOverviewPage';
lessons: any = 'CourseViewLessonsPage';
exercises: any = 'CourseViewDiscussionsPage';
assessments: any = 'CourseViewAssessmentsPage';
discussions: any = 'CourseViewDiscussionsPage';

constructor(public navCtrl: NavController, public navParams: NavParams)


ionViewDidLoad()
console.log('ionViewDidLoad CourseViewPage');


ionViewDidEnter()
this.tabRef.select(0);





The result is below.enter image description here



How do I ensure that the second tab isn't loaded inside the first one? Also, it is important to note that the first CoursesDashboardPage isn't lazy loaded but all the tabbed pages are lazy loaded. Any help will be greatly appreciated.



ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.3
@ionic/app-scripts : 3.2.3







ionic-framework ionic4






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 8 at 5:39









The SammieThe Sammie

446619




446619












  • there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

    – xuemind
    Mar 8 at 5:51

















  • there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

    – xuemind
    Mar 8 at 5:51
















there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

– xuemind
Mar 8 at 5:51





there should be something related to your router configuration and app.component.html and the root tabs.page.html. Suggest your post your project on www.stackblitz.com. it much easy for help.

– xuemind
Mar 8 at 5:51












0






active

oldest

votes












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%2f55057330%2fnavigating-from-one-ionic-tabs-page-to-another-ionic-tabs-page-loads-both-tabbed%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















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%2f55057330%2fnavigating-from-one-ionic-tabs-page-to-another-ionic-tabs-page-loads-both-tabbed%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

AWS Lex not identifying response if by a variable The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceEnforcing custom enumeration in AWS LEX for slot valuesHow to give response based on user response in Amazon Lex?Intercepting AWS Lambda Response to a AWS Lex QueryLex chat bot error: Reached second execution of fulfillment lambda on the same utteranceamazon lex showing invalid responseLambda response send back to Lex slot?Response card in Amazon lexAmazon Lex - Lambda response return HTML to botHow can I solve 424 (Failed Dependency) (python) obtained from Amazon lex?

Алба-Юлія

Захаров Федір Захарович