Topic: mdb-select show custom value based on selected options
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.
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.
Answered
- User: Free
- Premium support: No
- Technology: Angular
- MDB Version: 8.8.0
- Device: laptop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 10 months ago
Can you provide a more detailed example?
Taher hendawi commented 10 months ago
I have edited the post.
Taher hendawi commented 10 months ago
@Arkadiusz Idzikowski Is that detailed enough?