Make the button component a directive for more flexibility

demos/app/app.component.ts

@@ -5,13 +5,13 @@ import { Component } from "@angular/core";
     template:`
         <h1 style="text-align: center">Zero Blocks Samples</h1>
         <nav style="width: 100%; display: flex; justify-content: center;">
-            <ig-button type="flat" routerLink="/inputs">Inputs</ig-button>
-            <ig-button type="flat" routerLink="/carousel">Carousel</ig-button>
-            <ig-button type="flat" routerLink="/tabbar">TabBar</ig-button>
-            <ig-button type="flat" routerLink="/list">List</ig-button>
-            <ig-button type="flat" routerLink="/buttons">Buttons</ig-button>
-            <ig-button type="flat" routerLink="/avatar">Avatar</ig-button>
-            <ig-button type="flat" routerLink="/navigation-drawer">Navigation Drawer</ig-button>
+            <span igButton routerLink="/inputs">Inputs</span>
+            <span igButton routerLink="/carousel">Carousel</span>
+            <span igButton routerLink="/tabbar">TabBar</span>
+            <span igButton routerLink="/list">List</span>
+            <span igButton routerLink="/buttons">Buttons</span>
+            <span igButton routerLink="/avatar">Avatar</span>
+            <span igButton routerLink="/navigation-drawer">Navigation Drawer</span>
         </nav>
         <router-outlet></router-outlet>
     `

demos/app/avatarsample.component.ts

@@ -76,7 +76,7 @@ import { AvatarModule, Avatar } from "../../src/avatar/avatar";
                 </tr>
             </table>
         </div>
-        <ig-button type="raised" (click)="changeLink()">Change Image</ig-button>
+        <span igButton="raised" (click)="changeLink()">Change Image</span>
     `
 })
 export class AvatarSampleComponent {

demos/app/buttonssample.component.ts

@@ -6,25 +6,25 @@ import { ButtonModule } from "../../src/button/button";
     template: `
         <h3>Buttons</h3>
         <div>
-            <ig-button type="flat">Flat</ig-button>
+            <span igButton="flat">Flat</span>
         </div>
         <br>
         <div>
-            <ig-button type="raised">Raised</ig-button>  
+            <span igButton="raised">Raised</span>  
         </div>
         <br>
         <div>
-            <ig-button type="gradient">Gradient</ig-button>
+            <span igButton="gradient">Gradient</span>
         </div>
         <br>
         <div>
-            <ig-button type="raised" disabled>Disabled</ig-button>
+            <span igButton="raised" disabled>Disabled</span>
         </div>
         <br>
         <div>
-            <ig-button type="fab">
+            <a igButton="fab">
                 <i class="material-icons">alarm_add</i>
-            </ig-button>
+            </a>
         </div>
     `
 })

src/button/button.ts

@@ -1,15 +1,30 @@
-import { Directive, Component, Input, Output, ElementRef, ViewChild, NgModule } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer, NgModule } from '@angular/core';
+
 import { CommonModule } from '@angular/common';
 
-@Component({
-    selector: 'ig-button',
-    moduleId: module.id, // commonJS standard
-    templateUrl: 'button.html'
+@Directive({
+    selector: '[igButton]',
+    host: {'role': 'button'}
 })
 export class IgButton {
-    @ViewChild('igButton') _button: ElementRef;
+    private _type: string = 'flat';
+    private _cssClass: string = 'ig-button';
+    private _el: ElementRef;
+    private _renderer: Renderer;
+
+    constructor(private el: ElementRef, private renderer: Renderer) {
+        this._el = el;
+        this._renderer = renderer;
+    }
+
+    @Input('igButton') set type(value: string) {
+        this._type = value || this._type;
+    }
+
+    get type() {
+        return this._type;
+    }
 
-    @Input() type: string = "flat";
     @Input() disabled: boolean;
 
     get isDisabled() {
@@ -19,13 +34,20 @@ export class IgButton {
     set isDisabled(value: boolean) {
         this.disabled = value;
     }
+
+    setButtonStyles(el: ElementRef, renderer: Renderer) {
+        renderer.setElementClass(el.nativeElement, `${this._cssClass}--${this._type}`, true);
+        renderer.setElementClass(el.nativeElement, `${this._cssClass}--disabled`, this.isDisabled);
+    }
+
+    ngAfterContentInit() {
+        this.setButtonStyles(this._el, this._renderer);
+    }
 }
 
 @NgModule({
     declarations: [IgButton],
     imports: [CommonModule],
     exports: [IgButton]
 })
-export class ButtonModule {
-
-}
+export class ButtonModule {}

src/themes/material/extends/_buttons.scss

@@ -12,6 +12,7 @@
     text-transform: uppercase;
     cursor: pointer;
     user-select: none;
+    outline: none;
     -webkit-tap-highlight-color: transparent;
     transition: $button-transition;
 }