fix(common): allow null/undefined to be passed to ngStyle input (#47069)

This brings the typing of ngStyle into parity with ngClass since commit e2ab99b. Should help with some strict template checking edge cases. PR Close #47069
angular · Aug 9, 2022 · bedf537 · bedf537
1 parent 5e15e4f
commit bedf537
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/goldens/public-api/common/index.md b/goldens/public-api/common/index.md
@@ -549,7 +549,7 @@ export class NgStyle implements DoCheck {
     // (undocumented)
     set ngStyle(values: {
         [klass: string]: any;
-    } | null);
+    } | null | undefined);
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgStyle, "[ngStyle]", never, { "ngStyle": "ngStyle"; }, {}, never, never, true>;
     // (undocumented)

diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts
@@ -49,14 +49,14 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer,
   standalone: true,
 })
 export class NgStyle implements DoCheck {
-  private _ngStyle: {[key: string]: string}|null = null;
+  private _ngStyle: {[key: string]: string}|null|undefined = null;
   private _differ: KeyValueDiffer<string, string|number>|null = null;
 
   constructor(
       private _ngEl: ElementRef, private _differs: KeyValueDiffers, private _renderer: Renderer2) {}
 
   @Input('ngStyle')
-  set ngStyle(values: {[klass: string]: any}|null) {
+  set ngStyle(values: {[klass: string]: any}|null|undefined) {
     this._ngStyle = values;
     if (!this._differ && values) {
       this._differ = this._differs.find(values).create();

diff --git a/packages/common/test/directives/ng_style_spec.ts b/packages/common/test/directives/ng_style_spec.ts
@@ -55,6 +55,32 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
        }));
 
+    it('should remove styles with a null expression', waitForAsync(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = null;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
+    it('should remove styles with an undefined expression', waitForAsync(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = undefined;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
     it('should add and remove styles specified using style.unit notation', waitForAsync(() => {
          const template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;