fix(checkbox): fix disable style when checkbox is used in a OnPush ch…

…ange detection strategy context

fix #46

src/app/demo/checkbox-demo/checkbox-demo.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-checkbox-demo',
   templateUrl: './checkbox-demo.component.html',
   styleUrls: ['./checkbox-demo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
 export class CheckboxDemoComponent implements OnInit {

src/app/ui/checkbox/checkbox/checkbox.component.spec.ts

@@ -1,8 +1,11 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, flush, fakeAsync } from '@angular/core/testing';
 
 import { CheckboxComponent } from './checkbox.component';
 import { IW_CHECKBOX_CONFIG } from '../checkbox.config';
 import { CheckboxConfig } from '../checkbox-config.interface';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CheckboxModule } from '../checkbox.module';
+import { FormsModule } from '@angular/forms';
 
 describe('CheckboxComponent', () => {
   let component: CheckboxComponent;
@@ -84,12 +87,34 @@ describe('CheckboxComponent', () => {
     } as KeyboardEvent);
     expect(component.value).toBeFalsy();
   });
+});
 
-  it('triggers the change detection when disabling the component', () => {
-    spyOn((component as any).changeDetectorRef, 'detectChanges');
-    component.setDisabledState(true);
-    expect((component as any).changeDetectorRef.detectChanges).toHaveBeenCalled();
-  });
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <iw-checkbox [(ngModel)]="someValue" [disabled]="true"></iw-checkbox>
+  `
+})
+class TestComponent {
+
+}
+
+describe('Checkbox integration tests', () => {
+
+  it('applies disabled style when disabled', fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent ],
+      imports: [ CheckboxModule, FormsModule ]
+    })
+    .compileComponents();
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    // somehow, this test needs a flush
+    flush();
+    fixture.detectChanges();
+    const checkbox: HTMLElement = fixture.debugElement.nativeElement.querySelector('iw-checkbox');
+    expect(checkbox.classList.contains('checkbox--disabled')).toBe(true);
+  }));
 });
 
 describe('Checkbox component global config', () => {

src/app/ui/checkbox/checkbox/checkbox.component.ts

@@ -10,7 +10,7 @@ import {
   ChangeDetectorRef,
   Optional,
   Inject,
-  Renderer,
+  Renderer2,
   ElementRef
 } from '@angular/core';
 import {
@@ -43,7 +43,7 @@ export class CheckboxComponent implements OnInit, ControlValueAccessor {
   isDisabled: boolean;
 
   constructor(
-    private renderer: Renderer,
+    private renderer: Renderer2,
     private elementRef: ElementRef,
     private changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(IW_CHECKBOX_CONFIG) private checkboxConfig: CheckboxConfig
@@ -53,10 +53,9 @@ export class CheckboxComponent implements OnInit, ControlValueAccessor {
 
   ngOnInit() {
     if (this.checkboxConfig && this.checkboxConfig.containerClass) {
-      this.renderer.setElementClass(
+      this.renderer.addClass(
         this.elementRef.nativeElement,
         this.checkboxConfig.containerClass,
-        true
       );
     }
   }
@@ -109,7 +108,8 @@ export class CheckboxComponent implements OnInit, ControlValueAccessor {
    */
   setDisabledState(isDisabled: boolean): void {
     this.isDisabled = isDisabled;
-    this.changeDetectorRef.detectChanges();
+    this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+    this.changeDetectorRef.markForCheck();
   }
 
   private userToggle() {