As I embarked on creating a custom select component, I began with the input below:
@Input() options: SelectOption<UserRole>[] = [];
The parent component (user editor) utilizes this select component and provides the options as shown below:
roleOptions: SelectOption<UserRole>[] = [
{ value: 'USER', label: 'User', selected: false },
{ value: 'ADMIN', label: 'Admin', selected: false },
];
When the parent component loads the current user along with its user role, it sets the role in the constructor as follows:
// ... get user here ...
this.roleOptions.filter((o) => o.value === user.role).map((o) => (o.selected = true));
Within the select component, my aim is to adjust the displayed value based on the user's assigned role during ngOnInit (or any relevant lifecycle hook). However, I encountered an issue where the 'selected' value always remains false when filtered for it:
this.displayedValue = this.options.filter((o) => o.selected)[0].label;
While I can observe the changes in all options when printing them, the selected role is not found when attempting to filter for it. I experimented with ngOnChanges but faced the same outcome. Can someone shed light on why this is happening? How can I successfully display the assigned role?