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

Question

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

Answer 1

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.

Answer 2

I managed to get Hostbinding working with the background-image property.

Just put style inside the Hostbinding like this @HostBinding('style') backgroundImage: safeStyle; instead of @HostBinding('style.background-image') backgroundImage: safeStyle;

@HostBinding('style') backgroundImage: safeStyle;

this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(`background-image: url('${url}')`);

Answer 3

@Alexander Thanks for including the sanitizer code.

Interestingly I'm only seeing this necessary if I have extra parameters after the URL. If I only have a URL it works, but once I add 'left top' then I get this error :