Button directive fixes

demos/app/buttonssample.component.ts

@@ -10,11 +10,11 @@ import { ButtonModule } from "../../src/button/button";
         </div>
         <br>
         <div style="margin: 0 20px">
-            <span igButton="raised" igRipple="white">Raised</span>  
+            <span igButton="raised" igRipple="white">Raised</span>
         </div>
         <br>
         <div style="margin: 0 20px">
-            <span igButton="raised" igButtonColor="#FBB13C" igButtonBackground="#340068" igRipple="white">Raised Custom</span>  
+            <span igButton="raised" igButtonColor="#FBB13C" igButtonBackground="#340068" igRipple="white">Raised Custom</span>
         </div>
         <br>
         <div style="margin: 0 20px">
@@ -26,7 +26,7 @@ import { ButtonModule } from "../../src/button/button";
         </div>
         <br>
         <div style="margin: 0 20px">
-            <span igButton="raised" disabled>Disabled</span>
+            <span igButton="raised" [disabled]="true">Disabled</span>
         </div>
         <br>
         <div style="margin: 0 20px">

src/button/button.spec.ts

@@ -0,0 +1,73 @@
+import {
+  async,
+  TestBed,
+} from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { IgButton } from './button';
+
+
+describe('IgButton', function() {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                InitButton,
+                ButtonWithAttribs,
+                IgButton
+            ]
+        })
+        .compileComponents();
+    }));
+
+    it('Initializes a button', () => {
+        let fixture = TestBed.createComponent(InitButton);
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('span.ig-button--flat'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('i.material-icons'))).toBeTruthy();
+    });
+
+    it("Button with properties", () => {
+        let fixture = TestBed.createComponent(ButtonWithAttribs);
+        fixture.detectChanges();
+
+        let button = fixture.debugElement.query(By.css('span')).nativeElement;
+
+        expect(button).toBeTruthy();
+        expect(button.classList.contains('ig-button--raised')).toBe(true);
+        expect(button.classList.contains('ig-button--disabled')).toBe(true);
+
+        fixture.componentInstance.isDisabled = false;
+        fixture.detectChanges();
+
+        expect(button.classList.contains('ig-button--disabled')).toBe(false);
+        expect(button.style.color).toEqual('white');
+        expect(button.style.background).toEqual('black');
+
+        fixture.componentInstance.foreground = 'yellow';
+        fixture.componentInstance.background = 'green';
+        fixture.detectChanges();
+
+        expect(button.style.color).toEqual('yellow');
+        expect(button.style.background).toEqual('green');
+    });
+});
+
+@Component({
+    template:
+    `<span igButton="flat" igRipple="white">
+        <i class="material-icons">add</i>
+    </span>`
+})
+class InitButton {
+}
+
+@Component({
+    template:
+    `<span igButton="raised" [igButtonColor]="foreground" [igButtonBackground]="background" [disabled]="isDisabled">Test</span>`
+})
+class ButtonWithAttribs {
+    isDisabled = true;
+    foreground = 'white';
+    background = 'black';
+}

src/button/button.ts

@@ -1,74 +1,41 @@
-import { Directive, ElementRef, HostListener, Input, Renderer, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Directive, ElementRef, Input, Renderer, NgModule, OnInit } from '@angular/core';
 
 @Directive({
     selector: '[igButton]',
-    host: {'role': 'button'}
+    host: {
+        'role': 'button'
+    }
 })
 export class IgButton {
     private _type: string = 'flat';
     private _cssClass: string = 'ig-button';
-    private _el: ElementRef;
-    private _renderer: Renderer;
     private _color: string;
     private _backgroundColor: string;
 
-    constructor(private el: ElementRef, private renderer: Renderer) {
-        this._el = el;
-        this._renderer = renderer;
-        this._color = this._el.nativeElement.style.color;
-        this._backgroundColor = this._el.nativeElement.style.background;
-    }
+    constructor(private _el: ElementRef, private _renderer: Renderer) {}
 
     @Input('igButton') set type(value: string) {
         this._type = value || this._type;
+        this._renderer.setElementClass(this._el.nativeElement, `${this._cssClass}--${this._type}`, true);
     }
 
     @Input('igButtonColor') set color(value: string) {
         this._color = value || this._el.nativeElement.style.color;
+        this._renderer.setElementStyle(this._el.nativeElement, 'color', this._color);
     }
 
     @Input('igButtonBackground') set background (value: string) {
         this._backgroundColor = value || this._backgroundColor;
+        this._renderer.setElementStyle(this._el.nativeElement, 'background', this._backgroundColor);
     }
 
-    @Input() disabled: boolean;
-
-    get type() {
-        return this._type;
-    }
-
-    get color() {
-        return this._color;
-    }
-
-    get backgroundColor() {
-        return this._backgroundColor;
-    }
-
-    get isDisabled() {
-        return this.disabled !== undefined;
-    }
-
-    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);
-        renderer.setElementStyle(el.nativeElement, 'color', this._color);
-        renderer.setElementStyle(el.nativeElement, 'background', this._backgroundColor);
-    }
-
-    ngAfterContentInit() {
-        this.setButtonStyles(this._el, this._renderer);
+    @Input() set disabled(val) {
+        this._renderer.setElementClass(this._el.nativeElement, `${this._cssClass}--disabled`, !!val);
     }
 }
 
 @NgModule({
     declarations: [IgButton],
-    imports: [CommonModule],
     exports: [IgButton]
 })
 export class ButtonModule {}