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

fix: angular sync image attributes

Author: pawelphilipczyk-cloudinary

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

@@ -79,7 +79,7 @@ export class CloudinaryImageComponent implements OnInit, OnChanges, OnDestroy {
    */
   ngOnInit() {
     this.htmlLayerInstance = new HtmlImageLayer(this.el.nativeElement.children[0], this.cldImg, this.plugins, SDKAnalyticsConstants);
-    this.addAttributes();
+    this.syncAttributes();
   }
 
   /**
@@ -90,6 +90,7 @@ export class CloudinaryImageComponent implements OnInit, OnChanges, OnDestroy {
     if (this.htmlLayerInstance) {
       cancelCurrentlyRunningPlugins(this.htmlLayerInstance.htmlPluginState);
       this.htmlLayerInstance.update(this.cldImg, this.plugins, SDKAnalyticsConstants);
+      this.syncAttributes();
     }
   }
 
@@ -104,7 +105,7 @@ export class CloudinaryImageComponent implements OnInit, OnChanges, OnDestroy {
   /**
    * Add attributes to img element.
    */
-  addAttributes() {
+  syncAttributes() {
     ['alt', 'width', 'height', 'loading'].forEach(attr => {
       if (this[attr]) {
         this.el.nativeElement.children[0].setAttribute(attr, this[attr]);

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

@@ -42,7 +42,7 @@ describe('CloudinaryImageComponent render', () => {
     expect(mockPlugin).toHaveBeenCalledTimes(2);
   }));
 
-  it('should add attributes to image', fakeAsync(() => {
+  it('should sync attributes to image', fakeAsync(() => {
     component.cldImg = cloudinaryImage;
     component.width = '400px';
     component.alt = 'text text text';
@@ -54,7 +54,12 @@ describe('CloudinaryImageComponent render', () => {
     const img = imgElement.querySelector('img');
     expect(img.outerHTML).toBe('<img _ngcontent-a-c11="" alt="text text text" width="400px" height="500px"' +
       ' loading="eager" src="https://res.cloudinary.com/demo/image/upload/sample">');
+    component.width = "800px";
+    component.alt = "updated alt text";
+    component.height = "1000px";
+    component.loading = "lazy";
+    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">');
   }));
 });
-
-