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>