Angular: Multiple drop down list

Asked
Active3 hr before
Viewed126 times

5 Answers

multipleangular
90%

Install Angularnpm install -g @angular/cli,Create a new Angular project,Create a new Angular projectng new <project-name>,How to use ngfor to make a dropdown in Angular from an array ?

Example_snippet/controller/utility/_multiple.js/ <ng-select [items]="item-name. . .
<ng-select [items]="item-name" bindLabel="name" placeholder="Select item" appendTo="body" [multiple]="true" [(ngModel)]="selected">
</ng-select>
Step 2 continued with npm install -g @angular/cli. . .
npm install - g @angular / cli
Step 3 continued with ng new <project-name>. . .
ng new <project-name>
Step 4 continued with ng serve -o. . .
ng serve - o
Step 5 continued with ng new geeksforgeeks-multiSele. . .
ng new geeksforgeeks - multiSelect
Step 6 continued with npm install --save @ng-select/. . .
npm install--save @ng - select / ng - select
Step 7 continued with @import "~@ng-select/ng-select. . .
@import "~@ng-select/ng-select/themes/default.theme.css";
Step 8 continued with ng serve. . .
ng serve
load more v
88%

npm i ng-multiselect-dropdown,ng multiselect dropdown,ng8 multiselect dropdown,ng4 multiselect dropdown

Example_snippet/controller/utility/_multiple.js/ npm install ng-multiselect-dro. . .
npm install ng - multiselect - dropdown
Step 2 continued with import { NgMultiSelectDropDown. . .
import {
   NgMultiSelectDropDownModule
} from 'ng-multiselect-dropdown';
// ...

@NgModule({
   imports: [
      NgMultiSelectDropDownModule.forRoot()
      // ...
   ]
   // ...
})
export class AppModule {}
Step 3 continued with import { Component, OnInit } f. . .
import {
   Component,
   OnInit
} from '@angular/core';
import {
   IDropdownSettings
} from 'ng-multiselect-dropdown';

export class AppComponent implements OnInit {
   dropdownList = [];
   selectedItems = [];
   dropdownSettings = {};
   ngOnInit() {
      this.dropdownList = [{
            item_id: 1,
            item_text: 'Mumbai'
         },
         {
            item_id: 2,
            item_text: 'Bangaluru'
         },
         {
            item_id: 3,
            item_text: 'Pune'
         },
         {
            item_id: 4,
            item_text: 'Navsari'
         },
         {
            item_id: 5,
            item_text: 'New Delhi'
         }
      ];
      this.selectedItems = [{
            item_id: 3,
            item_text: 'Pune'
         },
         {
            item_id: 4,
            item_text: 'Navsari'
         }
      ];
      this.dropdownSettings: IDropdownSettings = {
         singleSelection: false,
         idField: 'item_id',
         textField: 'item_text',
         selectAllText: 'Select All',
         unSelectAllText: 'UnSelect All',
         itemsShowLimit: 3,
         allowSearchFilter: true
      };
   }
   onItemSelect(item: any) {
      console.log(item);
   }
   onSelectAll(items: any) {
      console.log(items);
   }
}
Step 4 continued with <ng-multiselect-dropdown [pl. . .
<ng-multiselect-dropdown [placeholder]="'custom placeholder'" [settings]="dropdownSettings" [data]="dropdownList" [(ngModel)]="selectedItems" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
Step 5 continued with <ng-template #optionsTemplate . . .
<ng-template #optionsTemplate let-item let-option="option" let-id="id" let-isSelected="isSelected">
  {{option}}
</ng-template>
Step 6 continued with <ng-template #optionSelectedTe. . .
<ng-template #optionSelectedTemplate optionSelectedTemplate let-option="option"  let-id="id">
  {{option}}
</ng-template>
load more v
72%

What is the simplest option of implementing a multiple dropdown UI component in Angular with or without bootstrap 4,I would like to design a multi select drop down functionality in angular using bootstrap 4, Following is the image below

Example_snippet/controller/utility/_multiple.js/ <select name="Sauces" multiple. . .
<select name="Sauces" multiple>
   <option value="Mustard">Mustard</option>
   <option selected value="Barbecue">Barbecue</option>
   <option value="Ketchup">Ketchup</option>
   <option selected value="Mayonaise">Mayonaise</option>
</select>
load more v
65%

For using multi-select dropdown here we use a package ng-multiselect-dropdown,,In this article, we are going to implement a multi-select dropdown in Angular applications

Example_snippet/controller/utility/_multiple.js/ ng new <YourProjectName>. . .
ng new <YourProjectName>
Step 2 continued with npm i ng-multiselect-dropdown. . .
npm i ng - multiselect - dropdown
Step 3 continued with import { Component } from '@an. . .
import {
   Component
} from '@angular/core';
import {
   IDropdownSettings,
} from 'ng-multiselect-dropdown';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   dropdownList = [];
   dropdownSettings: IDropdownSettings = {};
   ngOnInit() {
      this.dropdownList = [{
            item_id: 1,
            item_text: 'Item1'
         },
         {
            item_id: 2,
            item_text: 'Item2'
         },
         {
            item_id: 3,
            item_text: 'Item3'
         },
         {
            item_id: 4,
            item_text: 'Item4'
         },
         {
            item_id: 5,
            item_text: 'Item5'
         }
      ];
      this.dropdownSettings = {
         idField: 'item_id',
         textField: 'item_text',
      };
   }
}
Step 4 continued with <div style="width:50%"> <n. . .
<div style="width:50%">
   <ng-multiselect-dropdown [settings]="dropdownSettings" [data]="dropdownList">
   </ng-multiselect-dropdown>
</div>
Step 5 continued with import { Component } from '@an. . .
import {
   Component
} from '@angular/core';
import {
   FormBuilder,
   FormGroup
} from '@angular/forms';
import {
   IDropdownSettings,
} from 'ng-multiselect-dropdown';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   dropdownList = [];
   selectedItems = [];
   dropdownSettings: IDropdownSettings = {};
   dropDownForm: FormGroup;
   constructor(private fb: FormBuilder) {}
   ngOnInit() {
      this.dropdownList = [{
            item_id: 1,
            item_text: 'Item1'
         },
         {
            item_id: 2,
            item_text: 'Item2'
         },
         {
            item_id: 3,
            item_text: 'Item3'
         },
         {
            item_id: 4,
            item_text: 'Item4'
         },
         {
            item_id: 5,
            item_text: 'Item5'
         }
      ];
      this.dropdownSettings = {
         idField: 'item_id',
         textField: 'item_text',
      };
      this.selectedItems = [{
            item_id: 3,
            item_text: 'Item3'
         },
         {
            item_id: 4,
            item_text: 'Item4'
         }
      ];
      this.dropDownForm = this.fb.group({
         myItems: [this.selectedItems]
      });
   }
}
Step 6 continued with <div style="width:50%"> <for. . .
<div style="width:50%">
   <form [formGroup]="dropDownForm">
      <ng-multiselect-dropdown [settings]="dropdownSettings" [data]="dropdownList" formControlName="myItems">
      </ng-multiselect-dropdown>
   </form>
</div>
Step 7 continued with this.dropdownSettings = { . . .
this.dropdownSettings = {
   idField: 'item_id',
   textField: 'item_text',
   enableCheckAll: false,
};
Step 8 continued with this.dropdownSettings = { . . .
this.dropdownSettings = {
   idField: 'item_id',
   textField: 'item_text',
   enableCheckAll: true,
   selectAllText: "Select All Items From List",
   unSelectAllText: "UnSelect All Items From List",
};
Step 9 continued with <ng-multiselect-dropdown [. . .
<ng-multiselect-dropdown [placeholder]="'Select Your Item'" [settings]="dropdownSettings" [data]="dropdownList" formControlName="myItems">
</ng-multiselect-dropdown>
Step 10 continued with this.dropdownSettings = { . . .
this.dropdownSettings = {
   idField: 'item_id',
   textField: 'item_text',
   noDataAvailablePlaceholderText: "There is no item availabale to show"
};
Step 11 continued with this.dropdownSettings = { . . .
this.dropdownSettings = {
   idField: 'item_id',
   textField: 'item_text',
   allowSearchFilter: true
};
Step 12 continued with onItemSelect(item: any) { . . .
onItemSelect(item: any) {
   console.log('onItemSelect', item);
}
onItemDeSelect(item: any) {
   console.log('onItemDeSelect', item);
}
onSelectAll(items: any) {
   console.log('onSelectAll', items);
}
onUnSelectAll() {
   console.log('onUnSelectAll fires');
}
Step 13 continued with <ng-multiselect-dropdown [. . .
<ng-multiselect-dropdown [placeholder]="'Select Your Item'" [settings]="dropdownSettings" [data]="dropdownList" formControlName="myItems" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelect)="onItemDeSelect($event)" (onDeSelectAll)="onUnSelectAll()">
</ng-multiselect-dropdown>
load more v
75%

<mat-select> defaults to single-selection mode, but can be configured to allow multiple selection by setting the multiple property, This will allow the user to select multiple values at once

Example_snippet/controller/utility/_angular.js/ @NgModule({ providers: [ . . .
@NgModule({
   providers: [{
      provide: ErrorStateMatcher,
      useClass: ShowOnDirtyErrorStateMatcher
   }]
})
load more v