I am attempting to dynamically change the color of an element based on the user's selection from a form select dropdown. Currently, I can only achieve this functionality statically.
selectedEventGroup: string[]; //this variable stores the user's selection from the form select dropdown.
color: string = SchedulingMatrix.selectedEventGroup.value;color: string = "green"; //Although this hardcoded value works, it is not dynamic.
The select component in my code:
<p-dropdown [options]="eventGroup" [(value)]="eventGroup" style="width: 180px;"></p-dropdown>import....
@Component({
...
})
export class SchedulingMatrix implements OnInit {
events: any[];
event: MyEvent;
dialogVisible: boolean = false;
constructor(private eventService: EventService, private cd: ChangeDetectorRef) {
this.eventGroup = [];
this.eventGroup.push({
label: 'Select Group',
value: '#fff'
});
this.eventGroup.push({
label: 'group 1',
value: '#ccc'
});
this.eventGroup.push({
label: 'group 2',
value: '#ddd'
});
this.eventGroup.push({
label: 'group 3',
value: '#eee'
});
}
eventGroup: SelectItem[];
selectedEventGroup: string[]; //variable that captures the user's selection from the select dropdown.
}
export class MyEvent {
id: number;
title: string;
start: string;
end: string;
color: string = "green"; //This static color assignment currently works
//color: string = SchedulingMatrix.selectedEventGroup.value; //Not sure how to correctly link this to the user's selection in the eventGroup
allDay: boolean = true;
}