feat(buttons): dynamically add button attributes

Closes #5186

ionic/components/button/test/block/index.ts

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}

ionic/components/button/test/block/main.html

@@ -35,4 +35,8 @@
     <button block round outline>button[block][round][outline]</button>
   </p>
 
+  <p>
+    <button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+  </p>
+
 </ion-content>

ionic/components/button/test/button.spec.ts

@@ -179,7 +179,7 @@ export function run() {
 
   });
 
-  function mockButton(attrs, config) {
+  function mockButton(attrs?, config?) {
     config = config || new Config();
     let elementRef = {
       nativeElement: document.createElement('button')
@@ -189,12 +189,14 @@ export function run() {
         elementRef.nativeElement.setAttribute(attrs[i], '');
       }
     }
-    let renderer = {
+    let renderer: any = {
       setElementClass: function(nativeElement, className, shouldAdd) {
         nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
       }
     };
-    return new Button(config, elementRef, renderer, null);
+    let b = new Button(config, elementRef, renderer, null);
+    b._init = true;
+    return b;
   }
 
   function hasClass(button, className) {

ionic/components/button/test/clear/index.ts

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  clearButton = true;
+
+  toggleClear() {
+    this.clearButton = !this.clearButton;
+  }
+}

ionic/components/button/test/clear/main.html

@@ -35,4 +35,8 @@
     <button clear dark class="activated">Dark.activated</button>
   </p>
 
+  <p>
+    <button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+  </p>
+
 </ion-content>

ionic/components/button/test/outline/index.ts

@@ -4,4 +4,10 @@ import {App} from 'ionic-angular';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}

ionic/components/button/test/outline/main.html

@@ -51,4 +51,8 @@
     <button outline block secondary class="activated">[outline][block][secondary].activated</button>
   </p>
 
+  <p>
+    <button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+  </p>
+
 </ion-content>