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 have set up ionic environment
1) node and npm
2) cordova and ionic with sidemenu template
While using the ionic 4 components in the application its classes are not working
You can see it shows button without css.
Any help is appreciated.
Thank you
Components are working, I can see <ion-content> and <ion-header> in the console. probably you css is not working , try this in html
<ion-content padding>
<button ion-button class="btn">My button</button>
</ion-content>
and in scss
.btn{
background: red;
}
you can change the css property it this btn class and it should reflect when running the app
I would like to have the "ion-android-sync" icon (http://ionicons.com)
My current code is
<button class="button" ng-click="loadEvents()">L</button>
What's the proper class structure for that?
Also, if I just load the css file advertised on ionicons.com is enough?
you can use ion-icon element to use ionic icons inside button.
I hope it will reach your requirement
for example, i will add facebook logo inside button
<button class="button" ng-click="loadEvents()"><ion-icon name="logo-facebook"></ion-icon></button>
I have my simple application using Ionic Framework.
It looks like :
Here the list code :
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap" href="#/bands/{{auth.profile.name}}/{{band.id}}">
My problem is, when I try to scroll the list up and down, it always shows blur on the selected list, and it makes the view when doing scrolls is not smooth enough.
I can solve that blur problem, but I lose the list ng-click and href capabilities, like
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap">
How to resolve that blur problem without losing ng-click and href capabilities, in order to make scrolls are smoother?
Try using ui-sref instead of href. If this doesn't work create an anchor link inside your ion-item and redirect through it. Hopefully this will solve your problem.
What I try to do is have two different set of ion-side-menu, but it seems the first one always got overwritten by the second declared ion-side-menu directive.
you can have have one side menu per side. for exemple, one <ion-side-menu side="left"> and one <ion-side-menu side="right">
if you need your sidemenu to be changed depending on a context value, then use the power of angularJS to declare some ng-if="context1" or ng-if="!context1" to present different sidemenu templates