Merge pull request #133 from Naaajii/bugfix/undefined-properties

Bugfix/undefined properties
ngneat · May 3, 2023 · df13b0d · df13b0d
2 parents 7438882 + 94855a0
commit df13b0d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/projects/ngneat/svg-icon/src/lib/svg-icon.component.spec.ts b/projects/ngneat/svg-icon/src/lib/svg-icon.component.spec.ts
@@ -51,6 +51,39 @@ describe('SvgIconComponent', () => {
     expect(host.element.style.color).toBe('var(--svg-icon-color, red)');
   });
 
+  it('should not assign falsy height', () => {
+    host = createHost(`<svg-icon [key]="key" [height]="height"></svg-icon>`, {
+      hostProps: {
+        key: 'dashboard',
+        height: undefined,
+      },
+    });
+
+    expect(host.element.style.height).toBe('');
+  });
+
+  it('should not assign falsy width', () => {
+    host = createHost(`<svg-icon [key]="key" [width]="width"></svg-icon>`, {
+      hostProps: {
+        key: 'dashboard',
+        width: undefined,
+      },
+    });
+
+    expect(host.element.style.width).toBe('');
+  });
+
+  it('should not assign falsy color', () => {
+    host = createHost(`<svg-icon [key]="key" [color]="color"></svg-icon>`, {
+      hostProps: {
+        key: 'dashboard',
+        color: undefined,
+      },
+    });
+
+    expect(host.element.style.color).toBe('');
+  });
+
   it('should change font size', () => {
     host = createHost(`<svg-icon [key]="key" [fontSize]="fontSize"></svg-icon>`, {
       hostProps: {

diff --git a/projects/ngneat/svg-icon/src/lib/svg-icon.component.ts b/projects/ngneat/svg-icon/src/lib/svg-icon.component.ts
@@ -68,15 +68,15 @@ export class SvgIconComponent {
       this.setIconSize(this.mergedConfig.sizes[this.mergedConfig.defaultSize || 'md']!);
     }
 
-    if (changes.width) {
+    if (changes.width?.currentValue) {
       this.element.style.width = `var(--svg-icon-width, ${coerceCssPixelValue(this.width)})`;
     }
 
-    if (changes.height) {
+    if (changes.height?.currentValue) {
       this.element.style.height = `var(--svg-icon-height, ${coerceCssPixelValue(this.height)})`;
     }
 
-    if (changes.color) {
+    if (changes.color?.currentValue) {
       this.element.style.color = `var(--svg-icon-color, ${this.color})`;
     }