title: How do I add a background-image to an Angular 2+ Directive using @HostBinding?
body: <p>I need to create an Angular 2+ (I'm in 4.x) Directive (NOT a Component) that adds a background image via <code>@HostBinding</code>.  I know I'm close, but when I inspect it I see <code>background-image: none</code> in Chrome's inspector.</p>
  
  <pre><code>import { Directive, HostBinding } from '@angular/core';
  import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
  
  @Directive({
      selector: '[myDirectiveWithBackgroundImage]'
  })
  export class MyDirective {
  
      @HostBinding('style.background-image')
      public backgroundImage: SafeStyle;
  
      constructor(private sanitizer: DomSanitizer) {
          this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
              'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
      );
    }
  }
  </code></pre>
  
  <p>My assets/images/favicon.16png is being served by webpack.  I've tried all sorts of path options, <code>/assets</code>, <code>~/assets</code>, etc...  But <code>background-image</code> is always <code>none</code></p>
  
  <p><a href="https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview</a></p>