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

@Maximus https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview However, in the plunkr it doesn't add `background-image` **at all**. It does add other styles. — jkyoutsey, Jul 21 '17 at 18:01
@Vega src/main/ui/assets But, when served, assets is served at the root. — jkyoutsey, Jul 21 '17 at 18:03
so do 'url(/main/ui/assets/images/favicon16.png) no-repeat scroll 7px 7px;' — Vega, Jul 21 '17 at 18:05

score 7 · Accepted Answer · edited Mar 21 '20 at 17:17

7

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.

edited Mar 21 '20 at 17:17

Dharman

30,962
25
85
135

answered Jul 21 '17 at 18:09

Alexander Staroselsky

37,209
15
79
91

15+ years of HTML dev and I should have known that! Thanks! Worth noting that I had a stray `;` at the end of the string that was breaking it too. I've updated my plunker to a working state. – jkyoutsey Jul 21 '17 at 18:34
If you want to include `background-cover` it needs to be in this format with a `/` : `url("assets/images/backgrounds/bathroom.png") left center / cover no-repeat` – Simon_Weaver Aug 01 '18 at 20:58

score 1 · Answer 2 · answered May 02 '22 at 23:15

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

score 0 · Answer 3 · answered Aug 01 '18 at 20:33

0

@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 :

answered Aug 01 '18 at 20:33

Simon_Weaver

140,023
84
646
689

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

3 Answers3