I am starting with Angular2 and I got stuck on a following simple style setting which I don't know why doesn't work (following https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings)
What is wrong?
(I tried also [style.background-image] and [style.background.image] and using a component method to construct the "url(...)" string)
Code:
import { Component } from '@angular/core';
@Component({
selector: 'front-page',
template: `<div [style.backgroundImage]="'url(' + headerImage + ')'" [title]="title"> </div>`
})
export class FrontPageComponent {
headerImage = "http://example.com/image.jpg"
title = "test"
}
Result:
<html>
<head>...</head>
<body>
<app-component>
<front-page>
<div title="test">
</div>
</front-page>
</app-component>
</body>
</html>
