Angular 2 component styles from input

Question

We can use interpolation to enter input into the template:

@Component({
    selector: 'tag',
    inputs: ['color'],
    template: `
        <div id="test" style="background: {{color}}">
            Some text
        </div>
    `,  
})
class TestComponent {
}

My question is: is it possible to make it (somehow) work like this:

@Component({
    selector: 'tag',
    inputs: ['color'],
    template: `
        <div id="test">
            Some text
        </div>
    `,  
    styles: ['#test { background: {{color}}; }'],
})
class TestComponent {
}

This last attempt does not work, and I cannot find a way to do this.

Thank.

Answer 1

AFAIK you cannot do this. The stylesmetadata component will not have access to its variable Class. I recommend you go for ngClass/ngStyle

<div id="test" [ngStyle]="{ 'background': color }">
    Some text
</div>