How to create multi select dropdown in Angular?

How to create multi select dropdown in Angular?, someone asked me to explain?
In this tutorial, I will show you how to create multi select dropdown in angular project. I going to load the dropdown data from the api. For this I have created a service which has a getDropDownText method which I can fetch the selected value text.

Creating Service in Angular:

import * as _ from 'lodash';

public URL: any="";
constructor(private http:HttpClient) { }

  getUsers() {
    return this.http.get(this.URL)

  getDropDownText(id, object){
    const selObj = _.filter(object, function (o) {
        return (_.includes(id,;
    return selObj;


public users:any;
constructor( private _service:StudentService ) { }

 mySelect = [];
 selectedValue: any;
 selectChange() {
     this.selectedValue = this._service.getDropDownText(this.mySelect, this.users);

Html Code:

<h2>Multiple Dropdown Selections</h2>

<select name="my-select" [(ngModel)]="mySelect" (change)="selectChange()" multiple="multiple">
  <option [value]="" *ngFor="let item of users">

<h4>Selected Values</h4>    

          <li *ngFor="let SelVal of selectedValue">{{}}</li>
<ng-template #elseTemplate>
      Selected: {{selectedValue}}

Multiple dropdown select using api in angular
Video Guide:

Post your comments / questions