Reputation: 5366
I am trying to use toggle in my navbar to switch languages between English and German.
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ 'CATALOGUE' | translate }}</ion-title>
<ion-buttons end>
<ion-list>
<ion-item>
<ion-toggle [(ngModel)]="language"></ion-toggle>
</ion-item>
</ion-list>
</ion-buttons>
This basically looks ugly. What's the correct way of using such toggle button in navbar?
Upvotes: 0
Views: 602
Reputation: 4792
You can do something like
<ion-header>
<ion-navbar>
<ion-title>
Stackoverflow
</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleClick()">
<ion-toggle #autoToggle [(ngModel)]="autoRefresh" checked="true"></ion-toggle>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
import { Component, ViewChild } from '@angular/core';
import { NavController, Toggle } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
autoRefresh = true;
@ViewChild('autoToggle') autoToggle: Toggle;
constructor() {}
toggleClick() {
this.autoToggle.checked = !this.autoToggle.checked;
}
}
Upvotes: 1
Reputation: 45
If putting it inside <ion-buttons end></ion-buttons>
doesn't work try using <ion-buttons right></ion-buttons
instead. Get <ion-toggle></ion-toggle>
from the ion-list and ion-item because they have white background as default, put it inside the ion-buttons.
You can also make the ion-item's background to transparent by adding a class to it and do some css styling or inline styling.
Upvotes: 0
Reputation: 1089
I know this is too late but hope it helps anyone with similar problem.
I'm using ionic 3 and this thing worked as intended for me
Using toggle button in navbar:
<ion-buttons end>
<ion-toggle (ionChange)="onToggle($event)" [(ngModel)]="language"></ion-toggle> // ionChange event will fire every time when you change the toggle state
</ion-buttons>
Upvotes: 0