Angular 2 component styles from input

Question

We can use interpolation to write an 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 get it (somehow) to 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 seem to find a way how to do it.

Thanks.

Pankaj Parkar · Accepted Answer · 2016-05-07 20:51:05Z

4

AFAIK you can't do that. Component styles metadata wouldn't have access to its Class variable. I'd better suggest you to go for ngClass/ngStyle

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

answered May 7, 2016 at 20:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 component styles from input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related