fix(button): apply css for buttons w/ ngIf

Closes #5927
ionic-team · Jul 5, 2016 · 816a648 · 816a648
1 parent cac1d4f
commit 816a648
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
+      });
     }
   }
 }