From 816a6486b095851e4c4b7181d4d6b2cf655251fb Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 4 Jul 2016 21:26:55 -0500
Subject: [PATCH] fix(button): apply css for buttons w/ ngIf

Closes #5927
---
 src/components/backdrop/backdrop.ts          |  1 -
 src/components/button/button.ts              | 13 +++----------
 src/components/button/test/dynamic/index.ts  |  1 +
 src/components/button/test/dynamic/main.html |  3 +++
 src/components/toolbar/toolbar-item.ts       |  4 +++-
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/backdrop/backdrop.ts b/src/components/backdrop/backdrop.ts
index b839b3a393c..66abbed1670 100644
--- a/src/components/backdrop/backdrop.ts
+++ b/src/components/backdrop/backdrop.ts
@@ -3,7 +3,6 @@ import { Directive, ElementRef, Input } from '@angular/core';
 import { AppRoot } from '../app/app';
 import { isTrueProperty } from '../../util/util';
 
-const DISABLE_SCROLL = 'disable-scroll';
 
 /**
  * @private
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index cd282f7ae6d..a060da8a9d4 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -226,7 +226,10 @@ export class Button {
    * @private
    */
   setRole(val: string) {
+    this._assignCss(false);
     this._role = val;
+    this._readIcon(this._elementRef.nativeElement);
+    this._assignCss(true);
   }
 
   /**
@@ -350,16 +353,6 @@ export class Button {
     }
   }
 
-  /**
-   * @private
-   */
-  static setRoles(contentButtonChildren: any, role: string) {
-    let buttons = contentButtonChildren.toArray();
-    buttons.forEach((button: any) => {
-      button.setRole(role);
-    });
-  }
-
 }
 
 const BUTTON_SIZE_ATTRS = ['large', 'small', 'default'];
diff --git a/src/components/button/test/dynamic/index.ts b/src/components/button/test/dynamic/index.ts
index 6e025e6571d..3c02c71e3dd 100644
--- a/src/components/button/test/dynamic/index.ts
+++ b/src/components/button/test/dynamic/index.ts
@@ -16,6 +16,7 @@ class E2EPage {
   myColor1: string;
   myColor2: string;
   multiColor: Array<string>;
+  showIf: boolean = true;
 
   constructor() {
 		this.reset();
diff --git a/src/components/button/test/dynamic/main.html b/src/components/button/test/dynamic/main.html
index 6faac749379..77b64592903 100644
--- a/src/components/button/test/dynamic/main.html
+++ b/src/components/button/test/dynamic/main.html
@@ -2,6 +2,7 @@
 
   <ion-toolbar>
     <ion-buttons start>
+      <button danger *ngIf="showIf">ngIf</button>
       <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -25,6 +26,8 @@
   <button block [color]="multiColor" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Outline (Toggle)</button>
   <button block [color]="multiColor" [clear]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Clear (Toggle)</button>
   <hr/>
+  <button block outline danger (click)="showIf = !showIf">Toggle Header</button>
+  <hr/>
   <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
   <button block clear danger (click)="reset()">Reset all buttons</button>
 
diff --git a/src/components/toolbar/toolbar-item.ts b/src/components/toolbar/toolbar-item.ts
index a0254eacd49..699ff46d203 100644
--- a/src/components/toolbar/toolbar-item.ts
+++ b/src/components/toolbar/toolbar-item.ts
@@ -27,7 +27,9 @@ export class ToolbarItem {
   @ContentChildren(Button)
   set _buttons(buttons: any) {
     if (this.inToolbar) {
-      Button.setRoles(buttons, 'bar-button');
+      buttons.forEach((button: Button) => {
+        button.setRole('bar-button');
+      });
     }
   }
 }