3 files changed, 66 insertions, 0 deletions
diff --git a/src/angular/form-elements/checkbox/checkbox.component.html.ts b/src/angular/form-elements/checkbox/checkbox.component.html.ts
new file mode 100644
index 0000000..f4031db
--- /dev/null
+++ b/src/angular/form-elements/checkbox/checkbox.component.html.ts
@@ -0,0 +1,8 @@
+export default `
+<div class="sdc-checkbox">
+    <label SdcRippleClickAnimation [rippleClickDisabled]="disabled">
+        <input type="checkbox" class="sdc-checkbox__input" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled">
+        <span class="sdc-checkbox__label">{{ label }}</span>
+    </label>
+</div>
+`;
diff --git a/src/angular/form-elements/checkbox/checkbox.component.spec.ts b/src/angular/form-elements/checkbox/checkbox.component.spec.ts
new file mode 100644
index 0000000..36f478e
--- /dev/null
+++ b/src/angular/form-elements/checkbox/checkbox.component.spec.ts
@@ -0,0 +1,37 @@
+import { TestBed, async } from '@angular/core/testing';
+import { CheckboxComponent } from "./checkbox.component";
+import { AnimationDirectivesModule } from "../../animations/animation-directives.module";
+import { FormsModule } from "@angular/forms";
+
+
+describe("Checbox Tests", ()=>{
+    let component: CheckboxComponent;
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                CheckboxComponent
+            ],
+            imports:[
+                FormsModule,
+                AnimationDirectivesModule
+            ]
+        }).compileComponents();
+        const fixture = TestBed.createComponent(CheckboxComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it("Component Created", async(()=> {
+        expect(component).toBeDefined();
+    }));
+
+    it( "Test Value suppose to be toggled", async( ()=> {
+        component.toggleState(true)
+        expect(component.checked).toEqual(true);
+    }));
+
+    it( "If disabled not toggled"), async(()=>{
+        component.disabled = true;
+        component.toggleState(true);
+        expect(component.checked).toEqual(false);
+    });
+});
diff --git a/src/angular/form-elements/checkbox/checkbox.component.ts b/src/angular/form-elements/checkbox/checkbox.component.ts
new file mode 100644
index 0000000..ec05eac
--- /dev/null
+++ b/src/angular/form-elements/checkbox/checkbox.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import template from "./checkbox.component.html";
+
+@Component({
+    selector: 'sdc-checkbox',
+    template: template,
+    encapsulation: ViewEncapsulation.None
+})
+export class CheckboxComponent {
+    @Input() label:string;
+    @Input() checked:boolean;
+    @Input() disabled:boolean;
+    @Output() checkedChange:EventEmitter<any> = new EventEmitter<any>();
+
+    public toggleState(newState:boolean) {
+        if (!this.disabled) {
+            this.checked = newState;
+            this.checkedChange.emit(newState);
+        }
+    }
+}