CODEWITHSUNDEEP
ionic2
Thinker
Thinker

Reputation: 5366

ionic2 toggle in navbar use appropriately

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>

enter image description here

This basically looks ugly. What's the correct way of using such toggle button in navbar?

Upvotes: 0

Views: 602

Answers (3)

Paresh Gami
Paresh Gami

Reputation: 4792

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;
    }
}

Upvotes: 1

patmarley
patmarley

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

Mahesh Jadhav
Mahesh Jadhav

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

Related Questions