Tutorial Multiselect in MDB Angular

Nobuyuki SAMBUICHI asked 3 months ago

Your Multi select is good looking. but I can not find any information for preset option selection and/or get selected option values. Please provide guide for how to program Multi select in Angular 5.


Dear Nobuyuki SAMBUICHI ,

Thanks for posting this, we will update multiselect tutorial page. For now I prepared an example for you:

HTML code:

<div class="row mt-5">

<divclass="col-md-6">

<mdb-select #value (ngModelChange)="getValues($event)" [(ngModel)]="selectedValue" [options]="optionsSelect" [multiple]="true"placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

</div>

Ts code:

 

import { Component, OnInit } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent implements OnInit {

optionsSelect:Array<any>;

selectedValue='1';

getValues(values) {

if (values!==undefined) {

console.log(values);

}

}

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1', selected: true },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

}

For preset option selection you need to use two way data binding with ngModel and add 'selected: true' parameter to specific option. To get selected values use ngModelChange which fires on every change in select options.

Best,

Arek


worksonline answered 3 months ago

This is not working for me. The selected values does not get selected. I have the following array:

0:{value"1"label"Album 1"selectedtrue}

1:{value"2"label"Album 2"}

2:{value"3"label"Test1"}

3:{value"4"label"Test2"}

4:{value"5"label"Test3"}

HTML:

<div class="col-md-6">

<mdb-selectname="assignalbumselect" [(ngModel)]="selectedAlbum" [options]="albumSelect" [multiple]="true"placeholder="Assign album(s)"></mdb-select>

<label>Assign album(s)</label>

</div>

I am setting my ngModel the following way:

var res= [];
for(letalbumofalbums)
{
 var igobj= {};
if(album.selected)
{
igobj= { value:''+album.album_id+'', label:''+album.title+'', selected:true};
}
else
{
igobj= {value:album.album_id, label:album.title};
}

res.push(igobj);
}

this.albumSelect=res;


Arkadiusz Idzikowski commented 2 months ago

Dear worksonline,

You need to set value for 'selectedAlbum' in your typescript file. For example:

selectedAlbum = '1';

Best,
Arek


worksonline answered 2 months ago

Hello,

I have now updated my code so that it sets selectedalbum, but its still not working for me. Here is my code:

var res= [];

var selected= [];

for(letalbumofalbums)

{

var igobj= {};

if(album.selected)

{

selected.push(album.album_id);

igobj= { value:''+album.album_id+'', label:''+album.title+'', selected:true};

}

else

{

igobj= {value:album.album_id, label:album.title};

}




res.push(igobj);

}

this.selectedAlbum=selected;

this.albumSelect=res;

console.log("New selectedalbum: "+this.selectedAlbum);

console.log("New albumselect: "+this.albumSelect);

Arkadiusz Idzikowski commented 2 months ago

Dear worksonline,

You need to assign array of values to ngModel and not entire array of objects. For example, if you want to preselect first 3 values of your multiselect:

this.selectedAlbum = ['1', '2', '3']

Best,
Arek


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No