Showing posts with label Angular. Show all posts
Showing posts with label Angular. Show all posts

Multi Select Dropdown In Angular 14

In this article, we will see how to implement a multi-select dropdown in Angular14 applications. 

Creating an Angular Application

Now let’s create an Angular application

ng new Angular14App        
  1. JavaScript
Copy





Now open the application in VS code and go to the package.json file, you will see the latest CLI and other install packages



Now open the terminal and Run the created Application using the below command

ng serve -o

and you will be navigated to http://localhost:4200/ URL and will see the below screen




Installing dropdown package


For using the multi-select dropdown, we have to use a package ng-multiselect-dropdown.
npm i ng-multiselect-dropdown



After installing the package now we have to add this module to our app. module file

Add NgMultiSelectDropDownModule.forRoot() in your import array of app module file.



Implement Multi-select dropdown

Go to the app.component.ts file and Create a local array of the items which we will show in the dropdown. 

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 {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
    };
   
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
}

JavaScript
  1. JavaScript
Cop
Below is the app.component.ts file

<
div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
       formControlName="myItems">
    </ng-multiselect-dropdown>
  </form>
</div>
Markup

Now run your application and you will see output like below


Select default items on page load

When we run the application and want to load some dropdown values then we need to change app.component.ts file like below



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 {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
    };

    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
}

JavaScript

  1. JavaScript
Cop

Now when you will run the application, you will see below the output.



Change the text of select all/ unselect all checkbox


If we want to change the text value of select all and unselectall then we need to change the dropdown setting like below
  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
JavaScript


Output



Show hide select all options in the dropdown

If we want to hide or show the select all option then we need to change the dropdown setting like below
  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
      enableCheckAll: false,
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
JavaScript



Output


Add place holder

Whenever we see a dropdown, then we can add the placeholder to that, so let's change the dropdown setting like below

placeholder changes will be in app.component.html file


component file as shown in the below code.

<div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
       [placeholder]="'Select the Data'"
       formControlName="myItems">
    </ng-multiselect-dropdown>
  </form>
</div>
Markup

Output


Add search filter


Ng-multi select-dropdown by default gave a search filter for enabling this search filter you have to add a new setting in your settings array. 


ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',    
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
JavaScript

Output


No Data Placeholder

For some reason when you call dynamic data from API and you get nothing to show then you have to tell the user that there is no data or something like that. 




    ngOnInit() {
   
    this.settings = {
      idField: 'ID',
      textField: 'Value',    
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true,
      noDataAvailablePlaceholderText: "Nothing to show data"
    };
   
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
JavaScript

Output

Callback Methods

  • onSelect - Return the selected item when an item is checked. Example : (onSelect)="onDataSelect($event)"
  • onSelectAll - Return the all items. Example : (onSelectAll)="onSelectAll($event)".
  • onUnSelect - Return the unselected item when an item is unchecked. Example : (onUnSelect)="onDataUnSelect($event)"
  • onFilterChange - Return the key press. Example : (onFilterChange)="onFilterChange($event)"
  • onDropDownClose- Example : (onDropDownClose)="onDropDownClose()"

Here are some examples of callback methods.

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 {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;
 
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',    
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true,
      noDataAvailablePlaceholderText: "Nothing to show data"
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }

  onDataSelect(item: any) {
    console.log('onData Select', item);
  }
  onDataUnSelect(item: any) {
    console.log('onData UnSelect', item);
  }
  onSelectAll(items: any) {
    console.log('onSelect All', items);
  }
  onUnSelectAll() {
    console.log('onUnSelect All fires');
  }
}

JavaScript
<div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
   
       formControlName="myItems"
       (onSelect)="onDataSelect($event)"
       (onSelectAll)="onSelectAll($event)"
       (onDeSelect)="onDataUnSelect($event)"
       (onDeSelectAll)="onUnSelectAll()">
    </ng-multiselect-dropdown>
  </form>
</div>
Markup

Output


In the above image, we can see, that we performed a couple of callback operations and the same are logged in the console.









---------------------------------------------------