Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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.

ducksuite pro answered 6 years 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 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

ducksuite pro answered 6 years 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 staff commented 6 years ago

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

Arkadiusz Idzikowski staff answered 6 years ago


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

Please insert min. 20 characters.

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
Tags