I have an Ionic 2 app in which a user can go from home -> 'topic view' (which contains a back button to home and a side menu like so:)
<ion-menu id="itemHierarchy-{{_pageId}}" side="right" persistent="true" [content]="content">
//toolbar stuff
</ion-menu>
<ion-header>
<ion-navbar>
<button ion-button right menuToggle="itemHierarchy-{{_pageId}}">
<ion-icon name="list"></ion-icon>
</button>
<ion-title>name</ion-title>
</ion-navbar>
</ion-header>
<ion-content #topicView padding>
</ion-content>
I have a link in the 'topic-view' page which navigates to another 'topic-view' page (pushes it onto the stack via deeplinker), and in it the new side menu doesn't open. I presume this is because there are two 'topicView' 'ion-content' nodes in the stack, but these cant be assigned a dynamic ID so not sure how to fix it... anyone?
Related
I would like to change the ion-icon used in my navbar's back button, which appears when a page has been pushed onto the nav stack. Here is my code:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon [name]="navbarIcon"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
The "name" directive affects the appearance of the menu toggle button, but it has no effect on the back button. Is there a way to modify my code so I can change the icon displayed in the back button?
I looked at this question, but it is for Ionic 1 and I also think there should be a better way.
I was able to do this by hiding the default back button and adding a custom one.
In the Page where I need the custom back button, just set the header as below
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Details</ion-title>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Stackblitz link with working demo: https://stackblitz.com/edit/ionic-jihfrp
I am developing an ionic app with a side menu, I want to animate the list items on the side menu when it is toggled open using animate.css. To do this when the menu is opened I add a css class to the menu items. When the menu is closed I remove the class.
I did some research and found some event listeners that were added to ionic which I tried:
<ion-menu [content]="content" class="sidemenu-header" (ionOpen)="toggleMenuState()" (ionClose)="toggleMenuState()">
<ion-header>
<ion-toolbar>
<img src="./assets/imgs/sidebar-header-icon.png" class="icon"/>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sidemenu-content" (click)="toggleMenuState()">
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"
[ngClass]="{'test-class': isMenuOpen === true}">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Now when the menu is opened the class get's added however when I click outside the menu to close the it the classes do not get removed.
How do I do this?
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
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 does not shows menuToggle ion-button. Please help me resolve this issue
This is the code i am using for navigation in login.ts:
if(data[0].USR==1)
{
this.navCtrl.push(DashboardPage);
}
my code in dashboard.html
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Please help me resolve this issue
Please note:
When i normally navigate from menu to dashboard page, it shows the menu toggle button.
Would you like to try following html code for your menuToggle?
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Also note, if there isn't any back possibility from this dashboard view to your login view, I guess you would rather like to set it as root instead of pushing it. Therefore I would suggest to modify:
this.navCtrl.push(DashboardPage);
into
this.navCtrl.setRoot(DashboardPage);
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>