Topic: Pre Select first item in mdb-select
Declan Ward priority asked 11 months ago
Expected behavior
The list is populated with an array of objects.
<mdb-select
(valueChange)="onMonthClick($event)"
>
<mdb-option *ngFor="let yearMonth of yearMonths" [value]="[yearMonth.Date]">
{{yearMonth.Date | date:'MMM yyyy' }}
<span *ngIf="includecount">({{ yearMonth.DocumentCount }} )</span>
</mdb-option>
</mdb-select>
I would like to, on load, effectively click the first item in the list and fire the valueChange event.
Actual behavior
I can achieve this with
this.onMonthClick(this.yearMonths[0].Date);
My difficulty is that the selection is not displayed.
Resources (screenshots, code snippets etc.)
This is the result.
This is what I want to achieve
I have tried setting selectedValue as per docs without success.
Define selectedValue
selectedValue = new FormControl();
HTML
<mdb-select [formControl]="selectedValue"
(valueChange)="onMonthClick($event)"
>
And when the data is loaded for the select:
this.selectedValue = new FormControl(this.yearMonths[0].Date);
Declan Ward priority answered 11 months ago
Thank you Rafal.
I have found the problem:
<mdb-option *ngFor="let yearMonth of yearMonths" [value]="[yearMonth.Date]">
should be
<mdb-option *ngFor="let yearMonth of yearMonths" [value]="yearMonth.Date">
I had [] around yearMonth.Date :(
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.1.0
- Device: All
- Browser: All
- OS: Windows
- Provided sample code: No
- Provided link: No
Rafał Seifert free commented 11 months ago
Could you edit your post and provide full code sample how your not working code is currently set up? We could not recreate your problem. Adding the : this.selectedValue = new FormControl(this.yearMonths[0].Date); to ngOnInit works good in our demo example.