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

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 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

worksonline 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:

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

worksonline pro answered 6 years ago

0 0 Best answer

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

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

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

About author

Nobuyuki SAMBUICHI

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets