How to select multiple values from select in Angular

Question

My question is how to select multiple values in Angular. Approach I tried till now is :

Template:

<select multiple class="form-control" (click)="addDetails(t.value)" #t>
                    <option selected disabled>Select all applicable</option>
                    <option value="A">A</option>
                    <option value="C">C</option>
                    <option value="B">B</option>
                </select>

Then I am tapping all values in my class. However this does not look like a good approach to me. I was wondering how can I leverage Angular's data mapping here.

Component:

 addDetails(value){
    this.selectedValues = this.selectedValues.concat(',');
  }

PS: I am removing last comma before using. Also I do not want to use any extra plugins since I do not have luxury to install here :(.

Please help.

Answer 1

You can use md-select from angular-material2 that has a multiple property, and easily binds via ngModel . Plunker demo .

I was also able to use your code and bind the value with ngModel . In the following demo , you can select A, B, C (Hold Shift + Click available options) and see all of them getting added to selectedValue