How to add custom button in ng-multiselect-dropdown in angular

Question

I wanted to add button in ng-multiselect-dropdown like ok button for closing the dropdown and select all and unSelect button into dropdown

I am using Angular 8 and using ng-multiselect-dropdown below is code snippet.

This how I now manage but the actual requirement is I want to add custom buttons in dropdown like searchable text box is in it for each dropdown.

I think this may be possible but I don't know how can do it I tried all the options whichever I have in internet but I am still stuck.

Your valuable options / way outs and comment really appreciated.

app.component.html code

 <div class="card" style="padding-bottom: 5px;"> 

        <a style="padding-left: 10px" (click)="ConcerGridFilterReset()" routerLink="/" >Reset Filter</a>

        <pagination-controls style="padding-left: 30%"  (pageChange)="p = $event" id="foo"></pagination-controls>
            <div class="table-responsive" style="height:550px">
                    <table class="table table-bordered" style="max-height: 100px">
                      <thead>
                        <tr bgcolor="#e50000" style="color: white;text-align: center;">
                            <!-- <th></th> -->
                          <th>Concern ID</th>
                          <!-- <th>Issue ID</th> -->
                          <th>Local Market
                                <div style="width: 150px" >

                                        <ng-multiselect-dropdown name="drLocalMkt" style="font-size: 14px;font-weight: normal;"
                                        [placeholder]="'--Select--'"
                                        [data]="drLocalmarketList"
                                        [(ngModel)]="drSelectedLclMktsFilter"
                                        [settings]="filterdropdownSettings"
                                        (onSelect)="onLclItemSelectForFilter($event)"
                                        (onDeSelect)="onLclItemSelectForFilter($event)"

                                        >


                                      </ng-multiselect-dropdown>

                                      <!-- (onDeSelect)="fnUnselectLclMktforFilter()" -->
                                    </div>
                          </th>
                          <th>Process
                                <div style="width: 150px" >
                                        <ng-multiselect-dropdown name="drProcess" style="font-size: 14px;
                                        font-weight: normal;"
                                        [placeholder]="'--Select--'"
                                        [data]="drProcessList"
                                        [(ngModel)]="drSelectedProcessFilter"
                                        [settings]="filterdropdownSettings"
                                        (onSelect)="onProcessItemSelectForFilter($event)"
                                        (onDeSelect)="onProcessItemSelectForFilter($event)"                                       
                                         >
                                      </ng-multiselect-dropdown>
                                    </div>
                          </th>
                          <th>Description</th>
                          <th>Concern Status</th>
                          <th>Raised By</th>
                          <th>Raised Date</th>
                          <th>Assigned To</th>
                          <!-- <th>IsActive</th>    -->
                          <!-- <th>Edit</th> -->
                        </tr>
                      </thead>
                      <tbody *ngFor="let item of ConcernGrid |paginate: {id: 'foo', itemsPerPage: 10, currentPage: p}">
                        <tr  (click)="SelectedTableRowConcernList(item)" [ngClass] = "{'SelectedRow' : item.ConcernID == SelectedConcernID}">
                         <!-- <td>
                             <i  class="fa fa-plus" ></i> 
                         </td> -->
                          <td>{{item.Code}}</td>
                          <!-- <td>{{item.IssueCode}}</td> -->
                          <td>{{item.LocalMarketName}}</td>
                          <td>{{item.ProcessName}}</td>
                          <td>{{item.Description}}</td>
                          <td>{{item.ConcernStatusName}}</td>
                          <td>{{item.CeatedByName}}</td>
                          <td>{{item.CREATEDDATE | date:'MM/dd/yyyy'}}</td>
                          <td>{{item.AssignToName}}</td>
                          <!-- <td>{{item.UserEmailID}}</td> -->
                          <!-- <td><button (click)="fnEditConcern(item)" type="button" class="btn btn-primary btn-sm">Edit</button></td> -->
                        </tr>
                      </tbody>
                      </table>
                </div>
       </div> 

App.component.ts code is

 ngOnInit() {
    this.dropdownSettings={
      singleSelection: false,
      idField: 'ID',//item.ID
      textField: 'Text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: false,
      closeDropDownOnSelection:false,
      enableCheckAll:false
    };
    this.filterdropdownSettings = {
      singleSelection: false,
      idField: 'ID',//item.ID
      textField: 'Text',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 0,
      allowSearchFilter: true,
      closeDropDownOnSelection:true,
      enableCheckAll:false,
      maxWidth:400,

      Style:"maxWidth:600px"
    }
    this.fnLocalMarketDropdown();this.fnProcessDropdown();this.fnConcernStatusDropdown();
  }

for reference I am showing image of my page.

Answer 1

I'm pretty sure you are out of luck. What you can see below, is the actual implementaion of the ng-multiselect-dropdown.

It consists of the searchbar, the checkall and the items with their text.

  <div class="dropdown-list" [hidden]="!_settings.defaultOpen">
    <ul class="item1">
      <li (click)="toggleSelectAll()" *ngIf="_data.length > 0 && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1" class="multiselect-item-checkbox" style="border-bottom: 1px solid #ccc;padding:10px">
        <input type="checkbox" aria-label="multiselect-select-all" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached()" />
        <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>
      </li>
      <li class="filter-textbox" *ngIf="_data.length>0 && _settings.allowSearchFilter">
        <input type="text" aria-label="multiselect-search" [readOnly]="disabled" [placeholder]="_settings.searchPlaceholderText" [(ngModel)]="filter.text" (ngModelChange)="onFilterTextChange($event)">
      </li>
    </ul>
    <ul class="item2" [style.maxHeight]="_settings.maxHeight+'px'">
      <li *ngFor="let item of _data | multiSelectFilter:filter; let i = index;" (click)="onItemClick($event,item)" class="multiselect-item-checkbox">
        <input type="checkbox" aria-label="multiselect-item" [checked]="isSelected(item)" [disabled]="disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled" />
        <div>{{item.text}}</div>
      </li>
      <li class='no-data' *ngIf="_data.length == 0">
        <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>
      </li>
    </ul>
  </div>

What you could do, is one of the following:

1. Get the code from this link here, and make changes to add your custom controls and logic. It's not a very complicated control so it should be too hard. Beware that you are going to lose any updates in the future and you'll have to maintain on your own.

2. Fork the github repo or create a pull request with a suggested solution.

3. Create a mutliselect on your own, doing exactly what you want it to do (not suggested as multiselects are not an easy thing to make)

4. Use ng-select2 where you can edit the template fully. Check the Demo here to make sure it whether or not it works for you.