Angular

How to create multi select dropdown in Angular?

How to create multi select dropdown in Angular?, someone asked me to explain?
By:
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="https://jsonplaceholder.typicode.com/users";
constructor(private http:HttpClient) { }

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

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

Component:


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

 get(){
  this._service.getUsers().subscribe(res=>
    this.users=res);
 }
 
 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]="item.id" *ngFor="let item of users">
      {{item.name}}
  </option>
</select>


<h4>Selected Values</h4>    

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

Multiple dropdown select using api in angular
Video Guide:


Related Article

Post your comments / questions



Recent Article