I am facing a straightforward issue. I need to create an array of 3 buttons, and upon clicking each button, the background color of the page should change. The catch is that I have to achieve this using pure Angular-TypeScript without the use of JavaScript functions. I believe I need to utilize ng-class to set conditions for the buttons, but I'm unsure how to proceed. I've managed to create the array of three buttons successfully, but I seem to be stuck at this point. I would greatly appreciate it if you could provide a solution. Below is the snippet from my component.ts file
buttons = [
{
name: 'Red',
id: 'btn1'
},
{
name: 'Green',
id: 'btn2'
},
{
name: 'Blue',
id: 'btn3'
}
];
getColor(id) {
switch (id) {
case 'btn1':
return 'red';
case 'btn2':
return 'green';
case 'btn3':
return 'blue';
}
}
Here is the attempted html code.
<div *ngFor="let button of buttons">
<button [ngStyle]="{'background-color':getColor(button.id)}">
{{ button.name }}</button>
</div>
I tried using ng-style, which did not yield expected results. Kindly advise on how I can implement a solution using ng-class instead.