I have checked the docs and the demos, but alas!! I have not found any reference of implementing the multiple select option like select 2 using angular-material. Could anyone please tell me how to make it work?
In your component create a global variable named mySelections . This will store your selections :) It will hold an array of strings. Change the number 3 to N and presto, you're done.
Create Select using <mat-select> Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to select option, we need to use <mat-option> element. To bind value with <mat-option> , we need to use value property of it.
Multi select dropdown list is used when a user wants to store multiple values for the same record, whereas dropdown list is used to store a single value for a record. You can create custom categories of either dropdown list or multi select dropdown list and define items in each category.
Splaktar's answer is correct: Just add multiple to your md-select.
Codepen for working solution: http://codepen.io/ansgar-john/pen/RWPVEO?editors=101
HTML
<div> <md-input-container> <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select"> <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option> </md-select> </md-input-container> </div>
JS
(function () { 'use strict'; angular .module('MyApp') .controller('AppCtrl', function($scope) { this.likedAnimals = ["mouse", "dog"]; this.animals = ["mouse", "dog", "cat", "bird"]; }); })();
Code based on Stack Overflow answer: How am I supposed to implement multiple select option in angular-material?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With