Merge pull request #241 from cloudinary/angular-sync-empty-image-attributes

fix: synchronize angular image empty attributes on updates

Author: pawelphilipczyk-cloudinary

packages/angular/projects/cloudinary-library/src/lib/cloudinary-image.component.ts

@@ -103,13 +103,16 @@ export class CloudinaryImageComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   /**
-   * Add attributes to img element.
+   * Sync attributes to img element.
    */
   syncAttributes() {
     ['alt', 'width', 'height', 'loading'].forEach(attr => {
-      if (this[attr]) {
+      const isAttributeSet = this[attr] !== undefined && this[attr] !== null;
+      if (isAttributeSet) {
         this.el.nativeElement.children[0].setAttribute(attr, this[attr]);
         this.el.nativeElement.removeAttribute(attr);
+      } else {
+        this.el.nativeElement.children[0].removeAttribute(attr);
       }
     });
   }

packages/angular/projects/cloudinary-library/src/tests/cloudinary-image.component.spec.ts

@@ -61,5 +61,12 @@ describe('CloudinaryImageComponent render', () => {
     component.ngOnChanges();
     expect(img.outerHTML).toBe('<img _ngcontent-a-c11="" alt="updated alt text" width="800px" height="1000px"' +
       ' loading="lazy" src="https://res.cloudinary.com/demo/image/upload/sample">');
+    component.width = undefined;
+    component.height = undefined;
+    component.alt = "";
+    component.loading = "lazy";
+    component.ngOnChanges();
+    expect(img.outerHTML).toBe('<img _ngcontent-a-c11="" alt=""' +
+      ' loading="lazy" src="https://res.cloudinary.com/demo/image/upload/sample">');
   }));
 });