I have been experimenting with changing the color of a dropdown select menu based on the value selected by the user. Here is the code I have been working with:
App.component.ts
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedColor = '';
colors = [
{
name: 'yellow',
value: '#ffff00'
},
{
name: 'red',
value: '#ff3300'
},
{
name: 'blue',
value: '#0000ff'
}
];
onChange(value){
this.selectedColor = value;
}
}
App.component.html
<select [(ngModel)]="selected" [compareWith]="compareObjects" [ngStyle]="{'background-color': selected.color}">
<option *ngFor="let color of colors" [ngStyle]="{'background-color': color.value}" [ngValue]="datas">{{color.name}}</option>
</select>
However, I have noticed that this setup works fine on Windows but not on mac. Any suggestions on how to address this issue?