Ionic2 button bar classes don't apply correctly

[ghost]

Short description of the problem:

When using a <button> in an <ion-buttons> in an <ion-navbar> or <ion-toolbar>, the button's classes are incorrectly applied.

What behavior are you expecting?

Upon inspecting in devtools, normal buttons in navbar/toolbars have the classes: bar-button and bar-$color.
When using ngIf to dynamically show/hide buttons in toolbars, they should also apply these classes. They do not - but rather, they apply the standard classes: button and button-$color.

Perhaps implementing a way to choose whether button type is bar-* or not could be a good idea?

Steps to reproduce:

1. add any <button> component in an <ion-buttons> in an <ion-navbar> or <ion-toolbar> and ensure that it has the *ngIf="some expression" property set.
   see this linked pen. (click edit button in top right corner)

Which Ionic Version? 1.x or 2.x
This is using ionic 2.0.0-beta3

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.7.0

[jgw96]

Confirmed this one.

[adamdbradley]

We will be able to better fix this once ng2 provides a way to get a list of all attributes on a directive: angular/angular#1818

[arlowhite]

+1
I have a similar issue when dynamically setting color:

<ion-toolbar position="bottom">
  <ion-buttons text-center>
    <button [color]="formControls.valid ? 'primary' : 'danger'">
[...]

Generated HTML:

<ion-buttons text-center="">
    <button primary="" class="disable-hover bar-button bar-button-default bar-button-icon-left bar-button-primary"><span class="button-inner">
      <ion-icon name="camera" role="img" class="ion-md-camera" aria-label="camera"></ion-icon>
      Photo
    </span><ion-button-effect></ion-button-effect></button>

    <button primary="" class="disable-hover button bar-button bar-button-default bar-button-icon-left bar-button-danger" disabled=""><span class="button-inner">

      <ion-icon role="img" class="ion-md-alert" aria-label="alert"></ion-icon>
      Done
    </span><ion-button-effect></ion-button-effect></button>
  </ion-buttons>

The first button (Photo) has no dynamic attributes and its CSS is correct; the 2nd button (Done) should not have .button in addition to .bar-button. This causes it to get an outline in the toolbar instead of being clear.

[brandyscarney]

As a temporary work around, you can set the category on the button so it will always take on a specific role. For example,

<button *ngIf="true" category="bar-button">

[arlowhite]

@brandyscarney The category trick didn't work for me, it still gets the button class.
I also tried [class.button]="false", but that didn't work either.

<button primary (click)="done()" [disabled]="!formControls.valid"
            [color]="formControls.valid ? 'primary' : 'danger'"
            category="bar-button" [class.button]="false">
      <ion-icon [name]="formControls.valid ? 'checkmark' : 'alert'"></ion-icon>
      Done
    </button>

Is there a way to remove a category as a quick fix? As in remove the regular button category?
Otherwise, I can just override it with CSS for now.