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:

@Component({
    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>
</my-control>

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;
    this.update();
}
@Input() set color(value: string) {
    this._color = value;
    this.update();
}
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?

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:

@Component({
    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>
</my-control>

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;
    this.update();
}
@Input() set color(value: string) {
    this._color = value;
    this.update();
}
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?

• javascript
• css
• angular
• components

• There is no way to us ngFor without an array. You could create your custom ngFor directive that does that. There is an issue to support ngFor with a number instead of an array but it's unlikely to be implemented. – Günter Zöchbauer Commented May 24, 2016 at 15:53
• thanks for the tip mate.. this sucks though.. makes for a clumsy implementation of components in such cases.. – AweSIM Commented May 24, 2016 at 15:57
• 1 Your code can be optimized a bit. See stackoverflow.com/questions/36535629/… – Günter Zöchbauer Commented May 24, 2016 at 15:59
• @GünterZöchbauer.. love it!.. this is a lot more elegant than what i have at present.. thanks for the tip.. =) – AweSIM Commented May 24, 2016 at 16:05

2 Answers 2

<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}">

About your first question:

To create an array with ten undefined elements, you could do:

@Component({
  selector: 'my-app',
  template: `<div *ngFor="let i of arr(10); let index=index">hello {{index}}</div>`
})
export class AppComponent {
  arr=Array;
}

check this plunk