I've created a tabs based app with the command.
ionic start myApp tabs
The idea is to add different side menus for each tab pages, trying to do a master detail navigation, using the side menu as master elements list and the tab pages to show detailed content.
The app.component.html file looks like this:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
tab1.page.html like code:
<ion-menu contentId="aside1" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside1" main></ion-router-outlet>
tab2.page.html code:
<ion-menu contentId="aside2" side="start">
<ion-content>
<ion-list>
<ion-item class="side-menu-item" *ngFor="let item of strings">{{item.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="aside2" main></ion-router-outlet>
Both menus aside1 and aside2 works when I swipe and show the individual strings array elements at the first look of tabs.
The problem is when I go back to previous tab, instead of show again aside1 side menu, this stop working and what the swipe gesture really does is show the side menu of the other tab.
I don't know if I need a particular code in tab1.page.ts and tab2.page.ts to make this work.
The problem was that I haven't specify the menuId in each side menu.
I do not delete the question in case someone finds it interesting to create different menus for each page
Related
I work on a Ionic v3 app and I'm trying to display HTML in a *ngFor.
I've my TestPage.html with :
<ion-list *ngFor="let c of cities">
<ion-item>
<div [innerHTML]="c.html_rate"></div>
</ion-item>
</ion-list>
In c.html_rate I've some <ion-icon name="star-half"></ion-icon>.
But on the screen nothing appear...
I've also try: <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(c.html_rate)"></div>
But that does not work...
As shown in another question ion-item can only render particular elements. You are attempting to render an ion-icon within the ion-item component which doesn't work.
You can test this is true simply by replacing what is being injected into your div. If you swap <ion-icon name="star-half"></ion-icon> for <ion-note>Testing</ion-note>
I’ve set up a menu in my app.html :
<ion-menu persistent="true" id='menu' side="left" type='reveal'
[content]="mycontent">
<ion-content>
some menu content
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
and in each page, I have a button in the navbar that opens the menu :
.html
<ion-navbar hideBackButton>
<button ion-button small (click)="openMenu()">
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
.ts
openMenu(){
this.menuCtrl.enable(true, 'menu');
this.menuCtrl.open('menu');
}
The first page that has the menu button is my home.html. The menu works perfectly fine the first time this page is visited. When I navigate to the next page, the menu works fine there as well with the menu button. But when I navigate one more page ( 2 navigations from the home page ), the menu button stops working and the menu doesn’t open. And when I navigate from this page to the home page, the menu stops working there as well, and basically stops working in all pages.
It seems like making 2 navigations from the home page causes the menu to somehow disable itself for good. What could be the reason for this and how can I fix it?
I have an ion-list of ion-item that are clickable. I would like to change the color of the selected item in the list when it is clicked, and only in that moment; so, when the user stops pressing the item, its color changes to the default one.
I could only find to change the color when the item is pressed, but the color remains even after I stop pressing the item.
Edit: This is the html code for the list:
<ion-list>
<ion-item *ngFor="let tag of tagList; let i=index" (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
</ion-item>
</ion-list>
In order to do so, you'd need to set the following sass variables (in your variables.scss) file:
$list-ios-activated-background-color: #d9d9d9;
$list-md-activated-background-color: #f1f1f1;
$list-wp-activated-background-color: #aaa;
These are the default colors, so change them as needed on your end.
And then make sure your items are buttons (they won't look like buttons, is just to use their clickable properties and styles):
<ion-list>
<button ion-item *ngFor="let tag of tagList; let i=index (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
</button>
</ion-list>
I've added a side menu in my ionic 2 application that I'm developing, modifying the "super" template given by ionic. I've added the following code in app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I swipe on the left the menu appears correctly, but the problem is that, in the header of pages, I can't see the three bars to open the menu:
From the documentation, it seems that simply adding this code to the html makes the three bars appear, but it isn't working for me. Do I have to change something in the header of all the pages? I don't know, maybe the super template itself overrides something in the header of pages, so that the bars are not showed?
You could try adding button and icon.
Like this:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
I want to add href to navigation bar buttons like we do for the ion-item.
For example:
<ion-list>
<ion-item menu-close href="#/app/home">
Dashboard
</ion-item>
<ion-item menu-close href="#/app/aboutus">
About Us
</ion-item>
</ion-list>
I want exactly this to happen for navigation buttons. But I couldn't find a href thing for button.
I tried both $state.go('app.home') and $window.location.href = '#/app/home'; for the button and both works. But it hides the menu button in the navigation bar with a back button. I do not want it to be happen like that. I want the menu button there. Like when we click the 'dashboard' in the menu.
Any help will be appreciated.
I got the answer for this.
In the ion-side-menus tag, write enable-menu-with-back-views attribute value to 'true', which is 'false' by default.
Eg:
enable-menu-with-back-views="true"
As per my knowledge you can not use "href" tag for <ion-item>. <ion-item> tag is only used under <ion-list>
It seems you are trying to make tabs. If it is correct you can create tab view project of ionic using following command.
"ionic start myApp tabs"