Issue
I have the following question:
I have three Buttons that are displayed next to each other in either yellow, red or green. I would like to have them, say, 20 times in a random colour order.
But with my code, I only get them in the order of my statusCases, and only three times. The colour of the buttons is defined by the class they have.
How can I iterate over the list more then once to get more buttons? Do I have to edit my object?
Here is my code:
<button
*ngFor="let case of statusCases; let i = index"
class= {{case.cases}}
>
</button>
(Button in the html)
export class AvgProvisioningTimeComponent implements OnInit {
@Output() updateTestStatuses = new EventEmitter<string>();
statusCases: Object[];
constructor() {
this.statusCases = [
{cases: "status__button status__button--red"},
{cases: "status__button status__button--yellow"},
{cases: "status__button status__button--green"},
];
}
ngOnInit(): void {
}
updateTestStatus(status: string): void {
this.updateTestStatuses.emit(status);
}
}
( My class in .ts)
I would be very happy, if anyone could help me :)
Solution
HTML:
<div *ngFor="let button of [0, 1, 2, 3, 4, 5]; index as i">
<button id={{i}} [ngStyle]="getClassrandom(i)">Hello</button>
</div>
CSS:
.button-colour0 {
background-color: #2b9696;
}
.button-colour1 {
background-color: #a611c7;
}
.button-colour2 {
background-color: #81c016;
}
TS:
getClassrandom(i: number): any {
const classesArray = [
'button-colour0',
'button-colour1',
'button-colour2'];
const element = document.getElementById(i.toString());
element.className = classesArray[Math.floor(Math.random() * 3)];
}
I think this is what you want, just change the button-colour with you r css class
Answered By - Morty
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.