diff --git a/demos/app/buttonssample.component.ts b/demos/app/buttonssample.component.ts
index d13cb633460..938f1a6f166 100644
--- a/demos/app/buttonssample.component.ts
+++ b/demos/app/buttonssample.component.ts
@@ -10,11 +10,11 @@ import { ButtonModule } from "../../src/button/button";
- Raised
+ Raised
- Raised Custom
+ Raised Custom
@@ -26,7 +26,7 @@ import { ButtonModule } from "../../src/button/button";
- Disabled
+ Disabled
diff --git a/src/button/button.spec.ts b/src/button/button.spec.ts
new file mode 100644
index 00000000000..a270c6114f9
--- /dev/null
+++ b/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:
+ `
+ add
+ `
+})
+class InitButton {
+}
+
+@Component({
+ template:
+ `Test`
+})
+class ButtonWithAttribs {
+ isDisabled = true;
+ foreground = 'white';
+ background = 'black';
+}
diff --git a/src/button/button.ts b/src/button/button.ts
index 716c0b4477b..4b9259a40eb 100644
--- a/src/button/button.ts
+++ b/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 {}
\ No newline at end of file