I have 5 page (page 1, page 2, page 3, page 4, page 5) and my stack is page1->page2->page3->page4 and i want to move to page 5 from page 2, so my stack stays ( page1-:page2->page5) for this I use 2 lines
await this.navCtrl.navigateBack('page2',{animated: false});
await this.navCtrl.navigateForward('page5');
But this strategy is not good, because the user see the app change for page2 and after to page5.
I would like to improve this code, for de user don't see the change of page, the user just see the page5 and not the page page2.
Any help regarding this would be appreciated
For Back on page , you can direct code works
<ion-buttons slot="start">
<ion-back-button defaultHref="page2"></ion-back-button>
</ion-buttons>
and forward page
constructor(private router:Router){}
this.router.navigateByUrl('/page5');
Related
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).
When i open my app, the 1st page which appears is Login.html , after filling the form, it navigates to dashboard.html
Problem: When it goes to Dashboard.html , it shows back arrow on the top left and not the menu icon. I want it to show menu icon here and not the back arrow
This is the code i am using for navigation in login.ts:
if(data[0].USR==1)
{
this.navCtrl.push(DashboardPage);
}
Image of dashboard.html, please notice the arrow on left side
I have to click this arrow > go back to login > then from menu icon, i open menu and select dashboard page, then i see menu icon on dashboard.. why so ?
I have also created a video , sharing its youtube link - http://youtu.be/1eA5KXJkSDE?hd=1
It's default of Ionic when you navigate using push
If you wanna show menu toggle icon, you should use setRoot
Example:
onClickNavigate() {
console.log("onNavigate");
this.navCtrl.setRoot("PageTwo")
}
in "PageTwo" html, you need to add toggle button on the header too
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>page-two</ion-title>
</ion-navbar>
</ion-header>
Seems like you want to set the DashboardPage as a root page, so instead of the push method, use setRoot:
if(data[0].USR == 1) {
this.navCtrl.setRoot(DashboardPage);
}
In my app I have at every page the "hideBackButton" on true. This works except on one page where that button appears next to the menu button (see screenshot). This back button hasn't any functionality here.
Is there a way to hide it? Perhaps by a css hack? Any help would be great.
There are pages where the back button should be visible, so I can't hide it in the entire app.
One way to hide the back button would be to set that page as the root page, instead of just pushing it. So instead of
this.navCtrl.push(ThePage)
try with
this.navCtrl.setRoot(ThePage)
That's one way to do it. If you don't want to change that, you can replace the ion-navbar for an ion-toolbar. So instead of
<ion-header>
<ion-navbar>
<ion-title>
Events Feed
</ion-title>
</ion-navbar>
</ion-header>
You can hide the back button with this:
<ion-header>
<ion-toolbar>
<ion-title>
Events Feed
</ion-title>
</ion-toolbar>
</ion-header>
I'd prefer the first fix, but I'm not sure of what are the requirements on your end.
I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit