Bind rgb color value with angular 2 style binding

Question

I want to bind a rgb value like "200,55,100" coming from backend to the to the background color of a div.

That does not work, it throws template parse exception.

<div [style.background-color]="rgb({{model.color}})"

How do I do that correctly?

UPDATE

<div [style.background-color]="s.getColor()"> class="md-chip" *ngFor="let s of sums">
    <div class="md-chip-img">
        <span style="text-align:center" class="md-chip-span">X</span>
    </div>
    <span class="md-chip-text">{{s.subjectName}}</span>
</div>

Answer 1

You cannot use property binding (the [] syntax) and interpolation (the {{}} syntax) together. The reason for this is that Angular2 creates a property binding behind the scenes for the interpolation (see also Angular2 docs on interpolation).

I would suggest to try the following with interpolation:

<div style.background-color="rgb({{model.color}})">...</div>

Or if you want to use the property binding, the following should work:

<div [style.background-color]="'rgb(' + model.color + ')'">...</div>

Where getColorString() is a method that returns the computed string for your rgb value:

public getColorString(): string {
  return 'rgb(200, 55, 100)';
}