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>
Related
I have been struggling with ion-checkboxes and I really need some help. I am developing a questionnaire that has true or false answers. I want the true and false to appear as ion-checkboxes. Something like this
<ion-row>
<ion-col size="1">
<ion-checkbox [checked]="option1" (ionChange)=change1()>
</ion-checkbox>
</ion-col>
<ion-col>True </ion-col>
<ion-col size="1">
<ion-checkbox [checked]="option2" (ionChange)=change1()>
</ion-checkbox>
</ion-col>
<ion-col>False </ion-col>
</ion-row>
I want the ionChange to ensure that only one checkbox is checked as true at a time. In other worlds, if the user selects true, then the false checkbox (option2) will automatically become false. If anyone can help I would really appreciate it.
Here is the simple way to do it
https://stackblitz.com/edit/ionic-a51emq
Home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
avengers = {
stark: true,
steve: false
}
constructor(public navCtrl: NavController) {
}
filterData(){
this.avengers.steve = !this.avengers.steve
this.avengers.stark = !this.avengers.stark
}
}
Home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card padding>
<ion-checkbox [checked]="avengers.stark" ([ngModel])='avengers.stark' (click)="filterData()"></ion-checkbox> Stark
</ion-card>
<ion-card padding>
<ion-checkbox [checked]="avengers.steve" ([ngModel])='avengers.steve' (click)="filterData()">Stark</ion-checkbox> Steve
</ion-card>
</ion-content>
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
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>
Trying to figure out this problem. I am getting a maxmimum call stack size error and the link below is the js output.
I have added print statements and worked out the main app file is calling page1 as it should but then page1 is calling the main app file and this continues.
I am new to ionic 2 and would really appreciate a solution, thanks.
Javascript Output
page1.ts
import { Component } from '#angular/core';
import { Data } from '../../providers/data';
import { NewListPage } from '../new-list/new-list';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-page1',
templateUrl: 'page1.html',
})
export class Page1 {
public list: any[] = [];
constructor(public navCtrl: NavController, private _data: Data) {
console.log('Page1BEFORE');
let that = this;
this._data.list.subscribe((data) => {that.list.push(data);}, (err) => {console.error(err);});
}
newList() {
console.log('NEWLIST1');
this.navCtrl.push(NewListPage);
}
}
page1.html
<ion-app>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Page One</ion-title>
<ion-buttons end>
<ion-icon ios="ios-contact" md="md-contact"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="grid-basic-page">
<ion-col width-100><progress class="progressBar" max="100" value="80"></progress></ion-col>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-row>
<ion-col width-50><div>col</div></ion-col>
<ion-col width-50><div>col</div></ion-col>
</ion-row>
<ion-list *ngIf="list">
<ion-item *ngFor="let item of list">
<ion-label>{{item.title}}</ion-label>
</ion-item>
</ion-list>
<p *ngIf="!list"> No Lists </p>
<button fab fab-bottom fab-right (click)="newList()"> New </button>
</ion-content>
</ion-app>
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Data } from '../providers/data';
#Component({
templateUrl: 'app.html',
providers: [Data],
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
console.log('PreAPP');
this.initializeApp();
console.log('PostApp');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
console.log('pages');
}
initializeApp() {
console.log('APP');
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
console.log('OpenPAGE');
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{ 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>
Removing the <ion-app> element from page1.html fixed the issue
In my case I had not declared and added routes constant in imports array of the module. Once declared and imported error gone.
I am using IONIC 4