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

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 1:^[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.

Solution 2:^[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}')`);

Solution 3:^[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 :

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman
Solution 2	WoutVC
Solution 3	Simon_Weaver

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]