Skip to content

Instantly share code, notes, and snippets.

@fer-ri
Created May 24, 2016 06:33
Show Gist options
  • Save fer-ri/314cd43a32a417f176d39a6084af5829 to your computer and use it in GitHub Desktop.
Save fer-ri/314cd43a32a417f176d39a6084af5829 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>
@AlonsoK28
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment