CODEWITHSUNDEEP
angularbackground-imageangular2-directivesangular2-hostbinding
jkyoutsey
jkyoutsey

Reputation: 2041

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

Upvotes: 1

Views: 3420

Answers (3)

WoutVC
WoutVC

Reputation: 23

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

Upvotes: 1

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38847

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.

Upvotes: 7

Simon_Weaver
Simon_Weaver

Reputation: 146208

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

enter image description here

Upvotes: 0

Related Questions