title: Angular (load) on a background-image
body: <p>I'm using Angular 5 and I'm trying to get a loading icon while a background image of a div is loading.<br>
  I have no problem with this if its a normal img but if I try to have it as a background it doesnt work.  </p>
  
  <p>here is some example code  </p>
  
  <p><em>app.component.html</em></p>
  
  <pre><code>&lt;div class="test" [someDirective]="'some/otherImg.jpg'"&gt;&lt;/div&gt;  
  &lt;img class="test" [someDirective]="'some/OtherImg.jpg'"&gt;
  </code></pre>
  
  <p><em>app.component.css</em>  </p>
  
  <pre><code>.test{
    width: 300px;
    height: 200px;
  }
  </code></pre>
  
  <p><em>some.directive.ts</em></p>
  
  <pre><code>import { Directive, ViewChild, Input, ElementRef, HostListener } from '@angular/core';
  @Directive({
    selector: '[someDirective]'
  })
  export class SomeDirective {
    @Input() someDirective:string;
  
    constructor(private element:ElementRef){
      element.nativeElement.src = 'some/imgUrl.gif';
      element.nativeElement.style = "background-image: url('some/imgUrl.gif')";
    } 
  
    @HostListener('load', ['$event'])
    onLoad() {
      this.element.nativeElement.src = "some/otherImg.jpg";
      this.element.nativeElement.style = "background-image: url('some/otherImg.jpg')";
    }
  }  
  </code></pre>
  
  <p>is there a way I can get this to work so that the background is also loaded in the same way a normal image would be?  </p>
  
  <p>I should mention that I have no issue with getting the loading gif to act as the background-image that works fine but it doesnt change.</p>