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;
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.
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
add a comment |
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.
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
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
add a comment |
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.
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
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.
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
ionic-framework ionic4
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
add a comment |
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
add a comment |
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
);
);
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%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
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%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
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
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