Skip to content Skip to sidebar Skip to footer

IONIC 2 Navbar Left And Right Button Not Working

Because of the title issue in ionic 2 for android. i have set some css and make centre of title.and i have put the left and right button in the nav bar. but when i apply the onclic

Solution 1:

Here is the solution that works.

<ion-header>
 <ion-navbar>
  <ion-buttons *ngIf="user != null" left>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons  *ngIf="user == null" left>
    <button ion-button (click)="loginBtnClicked()">
      <ion-icon name="log-in"></ion-icon>
    </button>
  </ion-buttons>
<ion-title>Home</ion-title>
  <ion-buttons right>
    <button ion-button (click)="searchClicked()">
    <ion-icon name="search"></ion-icon>
  </button>
  </ion-buttons>


Solution 2:

I faced the same issue in ionic3.
Please use button tag with ion-buttons and this solution works for me.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <ion-header>
      <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
      <ion-toolbar>
        <button ion-buttons class="loginnavbtn" (click)="goback()" left>

        CANCEL
        <!-- left aligned content here -->
        </button>

        <ion-title>
          LOGIN
        </ion-title>

        <button ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
        SAVE
          <!-- left aligned content here -->
        </button>
      </ion-toolbar>
    </ion-header>
    <ion-content>


       </ion-content>

Solution 3:

Try to use ion-button

<button ion-button class="loginnavbtn" (click)="goback()" left>Name of button</button>

Post a Comment for "IONIC 2 Navbar Left And Right Button Not Working"