How can I refresh a tab page on tab selection in ionic 3?
Scenario: When a tab is selected I want that page to be reloaded so the data from the server can be updated.
My tab.ts
export class TabsPage {
tab1Root = DashboardPage;
tab2Root = AboutPage;
tab3Root = ContactPage;
tab4Root = CashoutPage;
tab5Root = ProfilePage;
constructor() {
}
}
What I tried:
ionTabsDidChange(refresher){
this.ionViewDidLoad();
refresher.complete();
console.log("Tab clicked");
}
Maybe the event that triggers ionTabsDidChange is not firing up, you can try using (ionTabsDidChange)="" on you html tag like this:
<ion-tabs (ionTabsDidChange)="ionTabsDidChange($event)" > </ion-tabs>
Reference
Related
I'd like to open a modal in Ionic 5 just opening a page. Without any action, just load the page and hop! you get your modal.
I've been reading the documentation at https://ionicframework.com/docs/api/modal#events but is too cryptic for me. Need some more elaboration...
I´ve fount severals examples out there of opening the modal with a click event, but that's not what I need.
Thanks in advance!
Look into Ionic's lifecycle hooks which let you execute code at different moments during a component's existence. You'll probably want to call a modal creating method inside of the ionViewDiDEnter hook within the component where you want the modal to appear.
Something like this:
export class YourPage {
constructor(public modalController: ModalController) { }
ionViewDidEnter() {
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: YourModalComponent
});
return await modal.present();
}
}
Pages structure is: Tabs(page1,page2,page3).
When I click a button within in page1, I want to go to page4,
but now we still can see tab, how to make page4 displays as a normal page and can back to tabbed page.
In page1, I use below line to go to page4
this.navCtrl.push(page4);
I think you could first try the following, which is for test only to understand
that this is achievable:
pass params to the ion-tabs like this:
<ion-tabs>
<ion-tab [root]="tabMap" [rootParams]="tabParams" tabIcon="map"></ion-tab>
<ion-tab [root]="tabList" [rootParams]="tabParams" tabIcon="list"></ion-tab>
</ion-tabs>
Prepare the params in the tabs.ts like this:
ionViewWillEnter() {
this.tabParams.parentNav = this.navCtrl;
}
So in the inner page (page1, 2, 3) you can retrieve it, place it in a variable e.g. parentNav, and when you want to navigate out of the tabs page to do a this.parentNav.push(page4).
The proper way I think is to use events events: ionic forum
So in the tabs.ts page you could have this piece of code:
events.subscribe('tabs:newPage', (page) => {
this.navCtrl.push(page);
});
And in each page, or in a service you could have:
newPage(page) {
console.log('navigate to a new page, not a tab')
this.events.publish('tabs:newPage', page);
}
What ionic is ?
If lazy loading,maybe ionic 3 , hod did you declare page4?
You have to push it like this : this.navCtr.push('page4');
If is all ok try this (it 's extracted form an app example) :
static get parameters() {
return [[IonicApp], [NavController], [ConferenceData], [UserData]];
}
constructor(app, nav, ...) {
// all of the constructor code
}
tourFunction() {
let nav = this.app.getComponent('nav');
nav.push('page4');
}
Ref
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
In Ionic 3 application, I want to show the cancel button of ion-searchbar until the search bar has value.
Mine is a tab based application and on moving to other tab and coming back to the tab, the search text is been retained and I need the cancel button also to be visible if text exists in search bar. But it is not visible.
<ion-searchbar
#projectsearchbar name="query" (search)="doSearch($event)" [(ngModel)]="global.SearchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="onSearchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >
I tried to get the cancel element and set the style, but it didn't work
ionViewWillEnter() {
if (this.global.SearchFilter) {
let cancelBlurElement = <HTMLElement>document.querySelector(".searchbar-ios .searchbar-ios-cancel");
cancelBlurElement.style.display = 'block';
}
}
Also tried to get the search bar control by class name and added a custom class but it didn't worked.
ionViewWillEnter() {
if (this.global.projectSearchFilter) {
let el=document.getElementsByTagName('ion-searchbar');
el[0].classList.add('visible-cancel');
}
}
.visible-cancel {
display: block!important;
}
Also tried to import as view child,
import { Component, Output, NgZone, ViewChild } from '#angular/core';
export class SearchPage {
#ViewChild('projectsearchbar') searchbar:Searchbar;
ionViewWillEnter() {
this.searchbar.setFocus();
}
}
i had the same issue
resolved by using this CSS snippet in the encapsulating element
.encapsulating-element {
.searchbar-ios-cancel{
display: none !important;
}
}
In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}