Attribute property binding for background-image url in Angular 2

Question

I have been struggling to figure out the best way to dynamically change the background-image attribute in a number of Angular 2 components.

In the following example, I am attempting to set the background-image of a div to an @Input value using [ngStyle] directive:

import {Component, Input} from '@angular/core'; import { User } from '../models';  // exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app) export type UserInput = User;  @Component({   selector: 'profile-sidenav',   styles: [ `     .profile-image {       background-repeat: no-repeat;       background-position: 50%;       border-radius: 50%;       width: 100px;       height: 100px;     }   `],   template: `       <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">     <h3>{{ username }}</h3>   ` })  export class ProfileSidenav {   @Input() user: UserInput;   blankImage: string = '../assets/.../camera.png';    // utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app)    get username() {     return this.user.username;   }   get image() {     if (!this.user.image) { return this.cameraImage;     } else { return this.user.image; }   } 

I don't think the issue is with the observable, since username displays and doing something like <img *ngIf="image" src="{{ image }}"> renders the image. I have to access the background-image attribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.

EDIT:

My original [ngStyle] declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags around url() and image. The correct way is (as answered below) is:

<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`. 

As stated in the original edit, a solution can also be achieved with the Renderer class in Angular 2. I have yet to do it but think there should be a way with setElementStylesor something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being.

Answer 1

I think that you should use something like that:

<div class="profile-image"      [ngStyle]="{ 'background-image': 'url(' + image + ')'}"> 

where image is a property of your component.

See this question:

• How to add background-image using ngStyle (angular2)?