fix(component): setPlaceholder called in Angular onChanges life cylce hook

setPlaceholder called in Angular onChanges life cylce hook to prevent angular reusing stale rendered
image when component image data changes.

Author: jackhkmatthews

src/app/image-loader/image-loader/image-loader.component.spec.ts

@@ -212,4 +212,10 @@ describe('ImageLoaderComponent', () => {
     component.checkInViewportStatus();
     expect(spy).toHaveBeenCalled();
   });
+
+  it('should set placeholder on changes', () => {
+    const spy = spyOn(component, 'setPlaceholder');
+    component.ngOnChanges();
+    expect(spy).toHaveBeenCalled();
+  });
 });

src/app/image-loader/image-loader/image-loader.component.ts

@@ -10,7 +10,8 @@ import {
   OnDestroy,
   ViewChild,
   ElementRef,
-  NgZone
+  NgZone,
+  OnChanges
 } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
@@ -50,7 +51,7 @@ import {
   templateUrl: './image-loader.component.html',
   styleUrls: [ './image-loader.component.scss' ]
 })
-export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
   /**
    * URL of image for `img` element to display
    * @memberof ImageLoaderComponent
@@ -331,4 +332,14 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.ngUnsubscribe$.next();
     this.ngUnsubscribe$.complete();
   }
+  /**
+   * Trigger image preload on changes.
+   * Prevents angular from reusing rendered image
+   * after changes.
+   *
+   * @memberof ImageLoaderComponent
+   */
+  public ngOnChanges(): void {
+    this.setPlaceholder();
+  }
 }