Background Image Style Directive for Angular 2 and Ionic 2

background-image.ts

import {Directive, ElementRef, Input} from '@angular/core';
 
@Directive({
    selector: '[background-image]'
})
export class BackgroundImage {
    private el: HTMLElement;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    @Input('background-image') backgroundImage: string;

    ngAfterViewInit() {
        this.el.style.backgroundImage = 'url(' + this.backgroundImage + ')';
    }
 
}

template.html

<div class="header" background-image="{{ item.featured_image }}">
    <!--some content-->
</div>

<!-- alternative -->
<div class="header" [ngStyle]="{'background-image': 'url(' + item.featured_image + ')'}">
    <!--some content-->
</div>

:) Very useful! Thanks.

Thanks :)

Very nice. Thanks very much for publishing this.

Awesome !

Awesome!

super util ❤️

Después de haber usado esta directiva por un tiempo, me di cuenta de que hay un problema cuando la imagen que le paso al Input es asíncrona, así que lo solucioné agregando ngOnChages para manejar los futuros cambios en el Input. También use el Renderer2 como recomendación de este post.

import { Directive, ElementRef, Input, Renderer2, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[background-image]'
})
export class BackgroundImageDirective {
  private el: HTMLElement;
  @Input('background-image') backgroundImage: string;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {
    this.el = this.elRef.nativeElement;    
  }

  ngAfterViewInit() {
    this.setBackgroundImage();
  }
  
  ngOnChanges(changes: SimpleChanges) {
    if ( changes['backgroundImage'] ) 
      this.setBackgroundImage();
  }
  
  setBackgroundImage(){
    this.renderer.setStyle(this.el, "backgroundImage", `url(${ this.backgroundImage })`);
  }
}

Espero sea de utilidad 😄

Thanks, very useful!

For those on Ionic3 that used ionic generate directive backgroundImage to add this code, don't forget to:

import { DirectivesModule } from '../directives/directives.module';

and then add it into the app.module.ts imports, eg:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    DirectivesModule
  ], (...)

angular 8

I do this on

app.ts

this.backgroudImage = { "background-image": url('${data.background_image}') };

and this in

app.html

<section class="jumbotron" [ngStyle]="backgroudImage"> <div class="container"> <div class="row text-center"> <h2>{{Game?.name}}</h2> </div> </div> </section>