title: Angular img loading directive
body: <p>I am trying to make a simple directive. When the image is loading, the img src will be set to an <code>@Input()</code> string field. On load, the image will be set to the original src value (or at least how I am trying to implement it).</p>
  <p>I was using the answer here:
  <a href="https://stackoverflow.com/a/38837619/843443">https://stackoverflow.com/a/38837619/843443</a>
  but is isn't a directive, and thus would require a number of changes wherever I use images.</p>
  <p>My first attempt:</p>
  <p>loading-img.directive.ts:</p>
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, HostListener, Input } from '@angular/core';
  
  @Directive({
    selector: '[tohLoadingImg]'
  })
  export class LoadingImgDirective {
    imgSrc: String;
  
    @Input()
    spinnerSrc: String;
  
    constructor(private el: ElementRef) {
      this.imgSrc = el.nativeElement.src;
      el.nativeElement.src = this.spinnerSrc;
    }
  
    @HostListener('load') onLoad() {
      this.el.nativeElement.src = this.imgSrc;
    }
  
  }
  </code></pre>
  <p>from:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;{{hero.imgUrl}}&quot; alt=&quot;Random first slide&quot;&gt;
  </code></pre>
  <p>to:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;{{hero.imgUrl}}&quot; alt=&quot;Random first slide&quot; [tohLoadingImg]=&quot;'/assets/ring.svg'&quot;&gt;
  </code></pre>
  <p>Error:</p>
  <pre><code>Can't bind to 'tohLoadingImg' since it isn't a known property of 'img'. (&quot;.imgUrl}}&quot; alt=&quot;Random first slide&quot;&gt;--&gt;
  </code></pre>
  <p>What am I missing?</p>