Topic: mdb-select show custom value based on selected options
Taher hendawi free asked 4 years ago
Hi,I have to mdb-select element in a table for each row and I need to show the number of selected options for each row.
In other words: I need each table row to have a cell containing a select element and after I select the options, it should show me, how many selections in that cell I have done!
changeFruitsForRow(selectedFruits: any, idx: number){
// create Fruit array of the selected options
const newFruits: Fruits[] = getFruitsOfSelection(selectedFruits);
// update row fruits
this.rows[idx].fruits = selectedFruits;
}
class Row{
id: string;
fruits: Fruits[];
}
class Fruits{
id: string;
name: string
}
The html template:
<tr mdbTableCol *ngFor="let r of sim.rows">
<td>
<mdb-select [(ngModel)]="r.fruits.lenght" [multiple]="true"
[options]="fruits"
(changed)="changeFruitsForRow($event, r.idx)"
>
</mdb-select>
</td>
..
</tr>
I tried also the "(selected)="optionSelected($event)" and "(deselected)="optionDeselected($event)" events but did not help.
Arkadiusz Idzikowski staff answered 4 years ago
Please take a look at this example: https://mdbootstrap.com/docs/angular/forms/select-1/#get-value-template
ngModelChange
event will return an array of all selected values, you can then use the length of this array to check the number of selected options.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.0
- Device: laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Can you provide a more detailed example?
Taher hendawi free commented 4 years ago
I have edited the post.
Taher hendawi free commented 4 years ago
@Arkadiusz Idzikowski Is that detailed enough?