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>

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>