I have been using the below code to go back to the previous page:
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
I have a requirement where I need to re-render the previous component when the back is clicked.
I have tried lifecycle hooks like ngOnInit(), ngAfterViewInit() etc. but none of them is called when the back button is called.
Please let me know a possible way to handle this requirement.
You can try ionViewWillEnter hook of Ionic instead of using angular lifecycle hook ngOnInit()
ionViewWillEnter(){
// your code to initialize
}
Here are other lifecycle hooks of Ionic
constructor --> ionViewDidLoad --> ionViewWillEnter --> ionViewDidEnter --> ionViewWillLeave --> ionViewDidLeave --> ionViewWillUnload.
You may call function on back button click like this,
// .ts file
gotoPreviousPage() {
this.navCtrl.push('PreviousPage');
}
Related
The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?
If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button
It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}
For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear
Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.
So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.
Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.
Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.
I am working in my Ionic 4 app and I have added a back button in my toolbar and I want to show the back button only on some particular pages.
This is app.component.html:
<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>
I want to show the back button only on some particular pages.
I have added the CSS for displaying the back button on some particular pages but it is not working.
I have also added the [hidden]="menuIsHidden" and make it false by default and true on some particular pages but this is also not working.
Any help is much appreciated.
Create a page by executing the following command:
ionic generate page SharedToolbar
Then inside that page use the #Input() directive, example:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<div *ngIf="showBackButton== 'true'">
<ion-back-button></ion-back-button>
</div>
</ion-buttons>
typescript:
#Component({
selector : 'shared-toolbar',
templateUrl : './shared-toolbar.page.html',
styleUrls : ['./shared-toolbar.page.scss'],
})
export class SharedToolbar implements OnInit
{
#Input() showBackButton: string = 'false';
constructor() { }
ngOnInit(){}
}
Then in any page you create, you can add the following in the html:
<shared-toolbar showBackButton="true"></shared-toolbar>
and send the following attribute as above to show the back button.
Note:
In the module of each page you might have to add the following:
schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
to be able to use a template URL of a specific page.
more info here:
https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding
You can create a css class such as:
.back-hide {
display: none;
}
And then use a ngClass on the back button that applies the style if needed.
<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>
where you want to show back button you can use ion-nav instead use of ion-toolbar.
By default ion-nav animates transition between pages based in the mode (ios or material design).
I am new to Ionic and i would like to remove the back button and only display the menu button on all my pages. Where can i do this?
You need to add attribute persistent="true" to ion-menu
Like that.
<ion-menu side="left" [content]="content" persistent="true"></ion-menu>
then menuToggle button will be available on all views.
You can find more details here in the docs.
For hiding back button you can try this code:
<ion-header>
<ion-navbar hideBackButton >
<ion-title>PageTitle</ion-title>
</ion-navbar>
</ion-header>
I tested in my project. It works fine.
I have a searchbar in my toolbar as follows:
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)">
</ion-searchbar>
</ion-toolbar>
and a function in the corresponding TS file:
onClear(event){
this.searchText = "";
}
But the 'onClear' event never gets hit when the searchbars little 'x' is clicked.. why is that?
Change it to (ionCancel) You're probably using an outdated ionic guide
After #Ivario18 suggested I change the clear to (ionCancel), I added the (ionCancel) as well as the (ionClear):
<ion-toolbar color="clarity">
<ion-searchbar
[(ngModel)]="searchText"
[showCancelButton]="false"
(ionInput)="onInput($event)"
(ionClear)="onClear($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
</ion-toolbar>
Now the clear is working...
I found that I was able to use just the (ionCancel) if I include the [showCancelButton]="true". Without it, the cancel didn't work at all, and the (ionClear) seemed to be breaking my infinite-scroll directive.
When i make hide-nav-bar="true" it also makes my sidebar menu disappear in the other pages i didnt wanted to. I just want to make the nav and side menu go away in the home page, but in the other pages my side menu is replaced for a back arrow for some reason. how can i solve this?
This is how it looks
This is how it is supposed to be
My code
<ion-view hide-nav-bar="true" title="Home" id="page1">
<ion-content padding="true" class="has-header backg">
<img class="log" src='../../img/image2.png' alt="HTML5 Icon" style="width:90px;height:90px;">
</ion-content>
</ion-view>
Please take a look at this plunker.
I just want to make the nav and side menu go away in the home page
In order to do that, you can, first, avoid including a header in your view. By just including and ion-content element in your home page html code, that view is not gonna have a navbar.
<ion-content>
<p>Home page</p>
<!-- ... -->
<!-- ... -->
</ion-content>
Even though we're not showing the navbar, the user could open the side menu by slicing it from the left (in this case) so we need to make sure to avoid that from happening like this:
Add an id to the ion-menu element like this:
<ion-menu [content]="content" side="left" id="menu">
<ion-toolbar secondary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item menuClose="menu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
And then in your HomePage.ts disable it like this:
import { MenuController, ... } from 'ionic-angular';
#Component({
templateUrl:"home.html"
})
export class HomePage {
constructor(private menuCtrl: MenuController, ...) { }
ionViewDidEnter() {
this.menuCtrl.enable(false, 'menu');
}
// ...
}
in the other pages my side menu is replaced for a back arrow for some
reason.
That's related to the navigation array and how Ionic2 handles it. If you push a new page, that back arrow will be shown. Even though you can hide it, if the app is being run in an android device with a physical back button, the user will still be able togo back to the home page. If you don't want to let the user go back to the HomePage (because is the login page or something like that) use the setRoot method instead.
this.nav.setRoot(NewPage);