Topic: Different mdb-select labels depending on whether a value has been selected or not
How can I have different mdb-select labels depending on whether a value has been selected or not? For example, I want the label "* Department" if there's no selected value. But only "Department" if a value has been selected. mdb-select is set to start with a blank option.
Dear @1001albertpadilla
Do you mean this effect?:
HTML
<mdb-select
(ngModelChange)="getSelectedValue($event)"
[(ngModel)]="selectedValue"
[options]="dateOptionsSelect"
[label]="getLabel() ? '*Department' : 'Department'"
></mdb-select>
TS
selected = '';
dateOptionsSelect = [
{ value: '1', label: 'Today' },
{ value: '2', label: 'Yesterday' },
{ value: '3', label: 'Last 7 days' },
{ value: '4', label: 'Last 30 days' },
{ value: '5', label: 'Last week' },
{ value: '6', label: 'Last month' },
];
getSelectedValue(event: any) {
this.selected = event;
}
getLabel() {
if (this.selected === '') {
return true;
} else {
return false;
}
}
Hope it helps!
Best Regards, Bartosz.
1001albertpadilla commented 5 years ago
I did some simplifications. But the general solution works! Thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.3
- Device: Laptop
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
How do you set the default value? Do you use reactive or template-driven forms?
1001albertpadilla commented 5 years ago
departments -- is a regular array of Department object populated inside the ts file.