fix: a bug with overriding component class via HostBinding

* bug-fix for angular/angular#7289
RenetConsulting · Sep 10, 2019 · 557f779 · 557f779
1 parent 833a3bb
commit 557f779
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/Services/ngx-utils-demo/projects/ngx-mat-input/src/lib/input.base.spec.ts b/Services/ngx-utils-demo/projects/ngx-mat-input/src/lib/input.base.spec.ts
@@ -38,11 +38,13 @@ describe('NgxMatInputBase', () => {
         spyOn(base, 'setHintState');
         spyOn(base, 'setRequired');
         spyOn(base, 'setMaxlength');
-        base.ngOnChanges({ errors: {} });
+        spyOn(base, 'setClass');
+        base.ngOnChanges({ errors: {}, class: {} });
         expect(base.setErrorsState).toHaveBeenCalled();
         expect(base.setHintState).toHaveBeenCalled();
         expect(base.setRequired).toHaveBeenCalled();
         expect(base.setMaxlength).toHaveBeenCalled();
+        expect(base.setClass).toHaveBeenCalled();
     });
     it('ngOnInit', () => {
         spyOn(base, 'updateControl');
@@ -65,7 +67,9 @@ describe('NgxMatInputBase', () => {
         base.errors = [];
         expect(base.showHint).toEqual(true);
     });
+
     describe('setErrorState', () => {
+
         it('should be 0', () => {
             base.setErrorState();
             expect(base.errorState).toEqual(0);
@@ -76,7 +80,9 @@ describe('NgxMatInputBase', () => {
             expect(base.errorState).toEqual(1);
         });
     });
+
     describe('setHintState', () => {
+
         it('should be 0', () => {
             Object.defineProperty(base, 'showHint', { get: () => false });
             base.setHintState();
@@ -87,7 +93,9 @@ describe('NgxMatInputBase', () => {
             expect(base.hintState).toEqual(1);
         });
     });
+
     describe('setErrorsState', () => {
+
         it('should be 0', () => {
             base.setErrorsState();
             expect(base.errorsState).toEqual(0);
@@ -98,13 +106,16 @@ describe('NgxMatInputBase', () => {
             expect(base.errorsState).toEqual(base.errors.length);
         });
     });
+
     it('updateControl', () => {
         base.updateControl();
         expect(ngControl.control.markAsDirty).toHaveBeenCalled();
         expect(ngControl.control.markAsTouched).toHaveBeenCalled();
         expect(ngControl.control.updateValueAndValidity).toHaveBeenCalled();
     });
+
     describe('setRequired', () => {
+
         it('should set required', () => {
             control.validator.and.returnValue({ required: true });
             base.setRequired();
@@ -122,7 +133,9 @@ describe('NgxMatInputBase', () => {
             expect(base.required).toBeUndefined();
         });
     });
+
     describe('setMaxlength', () => {
+
         it('should set maxlength', () => {
             const requiredLength = 26;
             control.validator.and.returnValue({ maxlength: { requiredLength } });
@@ -150,4 +163,9 @@ describe('NgxMatInputBase', () => {
         expect(base.setErrorState).toHaveBeenCalled();
         expect(base.setHintState).toHaveBeenCalled();
     });
+    it('setClass', () => {
+        base.class = 'bob';
+        base.setClass();
+        expect(base.classList).toEqual(`d-block ${base.class}`);
+    });
 });
diff --git a/Services/ngx-utils-demo/projects/ngx-mat-input/src/lib/input.base.ts b/Services/ngx-utils-demo/projects/ngx-mat-input/src/lib/input.base.ts
@@ -6,7 +6,8 @@ import { Subscription } from 'rxjs';
 export abstract class InputBase extends ProvidedControlValueAccessorBase implements ControlValueAccessor, OnChanges, OnInit, OnDestroy {
 
     @ViewChild('inputRef', { static: true }) inputRef: ElementRef;
-    @HostBinding('class') readonly class = 'd-block';
+    @HostBinding('class') classList: string;
+    @Input() class: string;
     @Input() placeholder: string;
     @Input() readonly: boolean;
     @Input() required: boolean;
@@ -36,6 +37,9 @@ export abstract class InputBase extends ProvidedControlValueAccessorBase impleme
             this.setErrorsState();
             this.setHintState();
         }
+        if (e.class) {
+            this.setClass();
+        }
         this.setRequired();
         this.setMaxlength();
     }
@@ -45,6 +49,7 @@ export abstract class InputBase extends ProvidedControlValueAccessorBase impleme
             this.subscription.add(this.formGroup.ngSubmit.subscribe(this.updateControl));
         }
         this.setError(null);
+        this.setClass();
     }
 
     ngOnDestroy(): void {
@@ -101,4 +106,7 @@ export abstract class InputBase extends ProvidedControlValueAccessorBase impleme
     }
 
     onBlur = () => this.blur.emit(this.ngControl.control.value);
+
+    /** bug-fix for https://github.com/angular/angular/issues/7289 */
+    setClass = () => this.classList = ['d-block', this.class].filter(x => !!x).join(' ');
 }
diff --git a/Services/ngx-utils-demo/src/app/input/input.component.css b/Services/ngx-utils-demo/src/app/input/input.component.css
@@ -0,0 +1,3 @@
+.red {
+    background: red;
+}
diff --git a/Services/ngx-utils-demo/src/app/input/input.component.html b/Services/ngx-utils-demo/src/app/input/input.component.html
@@ -3,7 +3,7 @@
     <form [formGroup]="formGroup" (resize)="resize($event)">
         !{{width}}!
         <button class="btn btn-primary btn-lg" type="button" (click)="toggle()">toggle</button>
-        <ngx-mat-input placeholder="Please write your name" label="Name" formControlName="input" [errors]="errors"></ngx-mat-input>
+        <ngx-mat-input class="red" placeholder="Please write your name" label="Name" formControlName="input" [errors]="errors"></ngx-mat-input>
         <ngx-mat-input placeholder="Last name" formControlName="placeholder" [errors]="errors"></ngx-mat-input>
         <ngx-mat-input placeholder="Organization" formControlName="organization" autocomplete="organization" name="cname" type="text"></ngx-mat-input>
         <ngx-mat-textarea placeholder="Please write your name" label="Name" formControlName="textarea"></ngx-mat-textarea>