Tutorial Multiselect in MDB Angular

Topic: Tutorial Multiselect in MDB Angular

Nobuyuki SAMBUICHI pro asked 6 years 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.

Add comment

ducksuite pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 staff commented 6 years 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

Add comment

ducksuite pro answered 6 years ago

0 0 Best answer

This is not working for me. The selected values does not get selected. I have the following array:
<pre>0:{value: "1", label: "Album 1", selected: true}

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

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

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

4:{value: "5", label: "Test3"}</pre>
HTML:
<pre><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></pre>
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;

Please insert min. 20 characters.

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

0:{value: "1", label: "Album 1", selected: true}

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:

res.push(igobj);
}

this.albumSelect=res;

Arkadiusz Idzikowski staff commented 6 years ago

Dear worksonline, You need to set value for 'selectedAlbum' in your typescript file. For example: selectedAlbum = '1'; Best, Arek

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear Nobuyuki SAMBUICHI ,

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

HTML code:
<div>
<pre><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></pre>
Ts code:

<div>
<pre>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' },

];

}

</pre>
</div>
</div>
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

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Nobuyuki SAMBUICHI

Pro User 0Support score
1Questions 0Answers 0Snippets