How do I add a background-image to an Angular 2+ Directive using @HostBinding?

Issue

I need to create an Angular 2+ (I'm in 4.x) Directive (NOT a Component) that adds a background image via @HostBinding. I know I'm close, but when I inspect it I see background-image: none in Chrome's inspector.

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;'
    );
  }
}

My assets/images/favicon.16png is being served by webpack. I've tried all sorts of path options, /assets, ~/assets, etc... But background-image is always none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview

Solution

background-image does not accept shorthand properties like background-repeat's no-repeat and background-size's 7px 7px. To use background shorthand properties you would need to use CSS background for the @HostBinding('style.background') instead of @HostBinding('style.background-image') like:

@HostBinding('style.background')
public background: SafeStyle;

constructor(private sanitizer: DomSanitizer) {
  this.background = this.sanitizer.bypassSecurityTrustStyle(
    'url("//ssl.gstatic.com/gb/images/i1_1967ca6a.png") no-repeat scroll 7px 7px'
  );
}

See this forked plunker demonstrating the functionality in action.

Answered By - Alexander Staroselsky