Skip to content

Instantly share code, notes, and snippets.

@netstart
Forked from fer-ri/background-image.ts
Created May 16, 2018 20:30
Show Gist options
  • Save netstart/8e715c7a7ee0797e18ed5353a4075f74 to your computer and use it in GitHub Desktop.
Save netstart/8e715c7a7ee0797e18ed5353a4075f74 to your computer and use it in GitHub Desktop.
Background Image Style Directive for Angular 2 and Ionic 2
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 + ')';
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment