ionic2 toggle in navbar use appropriately - ionic2

Question

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?

Answer 1

You can do something like
html
<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>
ts
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;
}
}

Answer 2

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>

Answer 3

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.