Angular 2 - background image into a html file using ngStyle

Question

I am pulling data from an API using an Angular 2 service.. I can output everything from the json api onto the page using something similar to this {{ project.title }} however i wish to output the url to a background image and I cant seem to get it working.. has anyone got any ideas or advice ?

Currently this is what I have. I've tried it without the curly braces also but nothing is working.

<div class="table-wrap featuredimg"  [ngStyle]="{'background-image': 'url(' + {{ project.projectimage }} + ')'}">

Solution 1

You don't need use {{}} for call some propiety than you put in a directive, like this:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
<div class="image" [ngStyle]="{'background-image':'url(' + object.link + ')'}"></div>
  `,
  styles: [`
  .image{width:100px;height:100px; border: solid 1px black;}
  `]
})
export class AppComponent {
  selectedColor:any = 0;
  color;

  object = {
    link: "http://lorempixel.com/100/100"
  }

  constructor(){
  }
}

You can see the example in this Plunker. Enjoy.

Solution 2

Don't use [] and {{}} together, it's either the one or the other:

<div class="table-wrap featuredimg"  [ngStyle]="{'background-image': 'url(' + project.projectimage + ')'}">

See also In RC.1 some styles can't be added using binding syntax

Solution 3

Just to build on top of Gunter's answer, this works with the async pipe as well.

 <div md-card-avatar class="profile_header" 
  [ngStyle]="{'background': 'url(' + (usergravatar$ | async) + ')'}"></div>

Comments

[Kravitz]

still no joy with that.. it gives me undefined

[Kravitz]

Is it just me or is anybody else getting slightly disillusioned with Angular 2... it promises so much but even the most trivial of things requires so many steps to get right

[tomaszbak]

Or just pass object to ngStyle like: [ngStyle]="backgroundStyle"