I've been trying the ion-menu of Ionic 3. The "type=overlay" function works properly as the side menu overlays the screen, yet neither "push" nor "reveal" values for "type" attribute seem to be working.
When I click the button, nothing happens, but the button is sure clicked as I've checked. I have not tried them in an emulator/phone if they work. But the ionic-documents on it shows it can be tested on browser.
<ion-menu side="start" menuId="first" [content]="content" type="push">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content #content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button menuToggle (click)="openFirst()"><ion-icon name="add"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
content
</ion-content>
.
import { Component } from '#angular/core';
import { NavController, MenuController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
private menu: MenuController) {
}
openFirst() {
this.menu.enable(true, 'first');
this.menu.open('first');
}
}
I expect this code the push the entire page and reveal the side bar menu, but it does nothing.
Button click function is not required as menuToggle is used :
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button menuToggle ><ion-icon name="add">
</ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
Also check this link.
I have implemented menu type.
https://stackblitz.com/edit/ionic-4j3yqp?file=app/app.html
Related
Is there a way to implement the ion-back-button without having it automatically trigger nav.pop() ?
The problem stems form the funny custom arrow-back button ionic uses which I can't simply remake.
The snippet below is the closest and simplest approach but the result does not look "identical". It doesn't doesn't automatically hide when the nav stack is empty.
<ion-button slot="start" (click)="onBack()" fill="clear">
<ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
</ion-button>
What I would like is
<ion-back-button slot="start" (click)="someCustomLogic()"></ion-back-button>
Definitely a hack:
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button onclick="event.stopImmediatePropagation(); window.myCustomMethod()"></ion-back-button>
</ion-buttons>
<ion-title>
List
</ion-title>
</ion-toolbar>
Inside ts:
import { Component, OnInit } from '#angular/core';
import { NavController } from '#ionic/angular';
#Component({
selector: 'app-list',
templateUrl: 'list.page.html',
styleUrls: ['list.page.scss']
})
export class ListPage {
constructor( private navCtrl: NavController) {
window['myCustomMethod'] = this.overide;
}
overide = () => {
console.log("hi")
this.navCtrl.navigateBack('/home')
}
}
Why don't your try something like that :
<ion-row>
<ion-col tap="someCustomLogic()">
<ion-icon slot="icon-only" name="arrow-back" style="color:#424242"></ion-icon>
</ion-col>
</ion-row>
I looked at: https://ionicframework.com/docs/api/config/Config/
This page used an example where the tabsPlacement on ion-tabs was changed for that one element.
I tried to recreate this with:
<ion-header>
<ion-navbar backButtonIcon="close">
<ion-title>settings-edit</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
There doesn't seem to be any changes with the navBar back button
There is no custom back button option in ionic simply change it as the button
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle hideBackButton="true">
<ion-icon name="md-close" (click)="close()" ></ion-icon>
</button>
<ion-title>settings-edit</ion-title>
</ion-navbar>
</ion-header>
Try This Code and add below TS code in your page
close()
{
this.navctrl.pop();
}
As in the documentation, you should define it it in your app.module.ts
Add this to your #NgModule:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
backButtonIcon: 'close',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'ios-transition'
})
]
I have 2 pages, login and home, when the user successfully logins, it will be directed to the home page and I set this as the root page. I've confirmed this by using navCtrl.canGoBackFunction and it is false. I tried adding a Menu Toggle but when I pressed the toggle button the menu does not show up
This is my home.html
<ion-header>
<ion-navbar color="primary">
<button menuToogle ion-button icon-only class="menu-button-left">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title class="alogo"><img alt="logo" height="35" src="../../assets/imgs/logo.png" ></ion-title>
<button ion-button class="menu-button-right" (click)="logout()">
<p>Logout</p>
</button>
</ion-navbar>
</ion-header>
<ion-content padding-left padding-right>
</ion-content>
my home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { AuthService } from '../../app/services/auth.service'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
private authService: AuthService
) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
console.log(localStorage.getItem('token'));
}
logout(){
console.log('logout button clicked');
this.authService.logOut();
this.navCtrl.setRoot(LoginPage);
this.navCtrl.popToRoot();
}
}
my app.html
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I've re-read multiple times the manual and I didn't see any issues with the way I did, the manual says it I put it in navbar the page should be root. I also tried using a toolbar but again clicking the menu toggle button does not do anything. Any idea ?
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. In your code you have to change like below code.
my app.html
<ion-menu [content]="mycontent" persistent="true">
<ion-content>
<ion-list>
<p>List/p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>
I am developing an IONIC-3 application, whether I want a dynamic nav bar with a title and a common button. For this reason, I have created a .ts file named
commonBtn.ts. Here is the code.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
And its html is :-
<ion-header>
<ion-navbar>
<ion-title> I want to create a dynamic name </ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Now, my question is that, How may I change the title name dynamically means when user come into "Home Page", title will be "Home" or user come into "About" page, title will be "About".
We can manage this in ionic v1 via $rootScope but here in Ionic v3, how can I resolve this ?
Also I am giving the html of Home page
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
<common-button></common-button>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click) = 'clickHere()'> Click </button>
</ion-content>
Please suggest me what to do.
Generally, you need to use Input decorator. Check Component Interactions.
In CommonBtnPage,
import { Component,Input } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
#Component({
selector: 'common-button',
templateUrl: 'commonBtn.html'
})
export class CommonBtnPage {
#Input()title:string;//here
constructor(public navCtrl: NavController) { }
logOut() {
this.navCtrl.setRoot(LoginPage);
}
}
In the html, set the title,
<ion-header>
<ion-navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
You can set the component and send the title as:
<common-button [title]="'home'"></common-button>
I am building a tabbed application in Ionic 2 which has five tabs one being the home page. The tabs work fine. I am trying to add a menu for each tab page other than the home page. I have duplicated and added the code below for each of the 4 pages in the home page just changing the menu id;s and the content id's. Everything works fine for the first page I access the subsequent pages I access just don't do anything. I thought this would be quite simple but already have spent days looking for a solution. The docs just refer to different menus on one page not different menus on several pages. Newbie so guess its simple. Help please.
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle="menujoinus">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>JOIN US</ion-title>
</ion-navbar>
</ion-header>
<ion-menu [content]="joinuscontent" id="menujoinus">
<ion-content>
<ion-list>
<button ion-button block icon-right color="secondary" menuClose="menujoinus">Close
<ion-icon name="close"></ion-icon>
</button>
<button ion-item icon-left (click)="openPageFieldguides()">
<ion-icon name="compass"></ion-icon>
Field Guides
</button>
<button ion-item icon-left (click)="openPageVolunteers()">
<ion-icon name="clipboard"></ion-icon>
Volunteers
</button>
<button ion-item icon-left (click)="openPageOwner()">
<ion-icon name="key"></ion-icon>
Owners
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #joinuscontent [root]="rootPage"></ion-nav>
It's a bit confusing but you need to add all the menus to the app component - not any of the sub pages - and then reference whichever you need from the sub page using the MenuController. In some cases you may need to disable/enable menus on the sub page but depends on the situation. Take a look at http://ionicframework.com/docs/api/components/app/MenuController/ and the "Multiple Menus on the Same Side" and "Multiple Menus on Different Sides" for more information.
An example:
<!-- Menu 1 -->
<ion-menu id="menu-one" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 1</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Menu 2 -->
<ion-menu id="menu-two" [content]="nav">
<ion-header>
<ion-navbar>
<ion-title>Menu 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="doSomething()" menuClose>
Item 1
</ion-item>
<ion-item (click)="doSomething()" menuClose>
Item 2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>
And on the sub page:
import { Component } from '#angular/core';
import { MenuController } from 'ionic-angular';
#Component({
selector: 'sub-page',
templateUrl: 'sub-page.html'
})
export class SubPage {
constructor(public menuCtrl: MenuController) {
// menuCtrl.enable(false, 'menu-one');
menuCtrl.enable(true, 'menu-two');
}
toggleMenu() {
this.menuCtrl.toggle();
}
}
The gotcha is the doSomething() method needs to be on the app component, not the sub page component.