Breaking News: Grepper is joining You.com. Read the official announcement!

Multiselect and Search in angular 13

Aamir Farooq answered on May 23, 2022 Popularity 6/10 Helpfulness 1/10

answer Multiselect and Search in angular 13

related multi select + search + Multiselect and Search in angular 13

Multiselect and Search in angular 13

Comment

npm install ng-multiselect-dropdown

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
// ...

@NgModule({
  imports: [
    NgMultiSelectDropDownModule.forRoot()
    // ...
  ]
  // ...
})
export class AppModule {}


...........................................
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 = {
      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);
  }
}


....................
<ng-multiselect-dropdown
  [placeholder]="'custom placeholder'"
  [settings]="dropdownSettings"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>

Popularity 6/10 Helpfulness 1/10 Language typescript

Source: www.npmjs.com

Tags: angular multi-select search typescript

Link to this answer
Share Copy Link

Contributed on May 23 2022

Aamir Farooq

0 Answers Avg Quality 2/10

Closely Related Answers

multi select + search + Multiselect and Search in angular 13

Comment

  <mat-form-field style="display:none;">
                <mat-label>Select Dealer</mat-label>
                <mat-select [formControl]="dealerIdForSpas" multiple disableOptionCentering
                  [disabled]="LineItemsWithLoadTypeList.length==0">
                  <mat-option *ngFor="let item of DealersLookUpDataList" [value]="item.company"
                    (onSelectionChange)="filterPartsLoad()">
                    {{item.company}}
                  </mat-option>
                </mat-select>
              </mat-form-field> 

              <mat-form-field appearance="fill">
                <mat-label>Select Dealer</mat-label>
                <input type="text" id="searchDealer" #dealerSpas autocomplete="off" aria-label="Number"
                  placeholder="Select Dealer" matInput [formControl]="dealerIdForSpas"
                  [matAutocomplete]="autodealerIdForSpas">
                <mat-autocomplete #autodealerIdForSpas="matAutocomplete">
                  <mat-option *ngFor="let option of dealerfilteredOptionsForSpa | async" [value]="option.company"
                    (click)="selectdealerIdForSpas(option)" multiple>
                    {{option.company}}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field> 

              <!-- [(ngModel)]="selectedItems" -->
              <div class="col-md-9" style="background-color: white;">
                <ng-multiselect-dropdown [placeholder]="'Select Dealer'" [settings]="dropdownSettings"
                  [data]="dropdownList" [formControl]="dealerIdForSpas" (onSelect)="onItemSelect($event)"
                  (onSelectAll)="onSelectAll($event)">
                </ng-multiselect-dropdown>
              </div>


  dealerfilteredOptions: Observable<any[]>;
  dealerfilteredOptionsForSpa: Observable<any[]>;
  public AllCarrierDataList: any[] = [];
  public options: any[] = [];

  this.dealerfilteredOptions = this.dealerId.valueChanges
      .pipe(
        startWith(''),
        debounceTime(200),
        distinctUntilChanged(),
        map(valueGot => {
          debugger
          this.options = this._filterDealersList(valueGot);
          if (this.options !== undefined) {
            return this.options.slice(0, 40);
          }
        })
      );

    this.dropdownSettings = {
      singleSelection: false,
      defaultOpen: false,
      idField: 'dealerid',
      textField: 'company',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 99999,
      allowSearchFilter: true
    };

Popularity 8/10 Helpfulness 2/10 Language typescript

Source: www.npmjs.com

Tags: search multi-select typescript angular types

Link to this answer
Share Copy Link

Contributed on May 23 2022

Aamir Farooq

0 Answers Avg Quality 2/10

Multiselect and Search in angular 13

Contents

More Related Answers

Multiselect and Search in angular 13

Closely Related Answers

multi select + search + Multiselect and Search in angular 13

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.