Angular2 Components - Dynamic Inline Styles


I have a component that has a count and a color property. The component is supposed to display count number of <div>s with an inline style used to change its color to color.

Here's what I have so far:

    selector: 'my-control',
    template: `<div *ngFor="let i of dummyArray" style="color: {{color}}"> COLOR = {{color}}</div>`
export class MyControl {
    private _count: number;
    @Input() set count(value: string) {
        this._count = +value;
    @Input() set color(value: string) {
        this._color = value;
    get dummyArray(): number[] {
        let ret: number = [];
        for (let i = 0; i < this._count; ++i) ret.push(i);
        return ret;
    get color(): string {
        return this._color;

This renders:

<my-control count="5" color="red">
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>

Now I have two issues with this:

  1. Is there any better way to render the <div>s count times without creating a dummy array?

  2. More importantly, the inline styles are not being set. If I hardcode styles like style="color: red", it works. But style="color: {{color}}" does not. The element is rendered without any styles as you can see above.

For #2, I have also tried using the nativeElement's children as well:

@Input() set count(value: string) {
    this._count = +value;
@Input() set color(value: string) {
    this._color = value;
update(): void {
    for (let i = 0; i < this._count; ++i) {
        this.renderer.setElementStyle(this.elRef.nativeElement.children[i], 'color', this._color);

But I get exception accessing the child elements as they don't exist apparently.

How should I go about solving these issues?

Günter Zöchbauer
<div *ngFor="let i of dummyArray" style="color: {{color}}>

is missing the closing " after color}}

Binding this way to style should be avoided because it doesn't work in all Safari versions (maybe also others).

Instead use

<div *ngFor="let i of dummyArray" [ngStyle]="{'color': color}">

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at


Login to comment


How to call dynamic styles in angular2

Change inline styles to styled-components

Styled Components - Inline styling overlaps the media query styles

Setting Complex react inline styles such as hover, active on react components such as button

mutable styles object for inline-style react components

Angular2 Shared component with dynamic not shared components

create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2

How to render a dynamic template with components in Angular2

Angular (1.5.8) Dynamic Components

Angular Dynamic Components and ExpressionChangedAfterItHasBeenCheckedError

Angular Materials won't apply styles to components

Kendo UI Angular 4 components override styles

Angular-cli build to inline styles and templates

Creating nested dynamic components in angular

Problems with Dynamic components Angular 12

Angular 2 - Why is the binding of dynamic components broken?

Angular 2 OnPush change detection for dynamic components

How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components

"Can't read the url" error for angular2 dynamic components with templateUrl

Angular 4 how to apply dynamic styles?

How to add styles using styled-components to programatically created heading with dynamic level?

Styled components not applying styles

Imported Styles are not applied to components

Apply styles to specific for angular material components from global css files

Angular: Component styles do not cascade to sub-components?

Angular - Styles not being applied to my custom components from parent

Prevent angular material css styles from propagating to other components

React specifying inline styles

useCallback inline function styles