angular - 如何在角度的ng-multiselect-dropdown中添加自定义按钮(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

(我想在ng-multiselect-dropdown中添加按钮，如ok按钮以关闭下拉菜单，然后全选并取消选择按钮)

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

(我正在使用Angular 8，下面使用的ng-multiselect-dropdown是代码段。)

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

(app.component.html代码)

 <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

(App.component.ts代码是)

 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.

(供参考，我正在显示页面的图像。)

  ask by Anant Doshi translate from so

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.

(您将在下面看到的是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.

   (分叉github仓库或创建带有建议解决方案的请求请求。)

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)

   (自己创建一个mutliselect，完全按照自己的意愿去做（不建议这样做，因为multiselect并非易事）)

4. Use ng-select2 where you can edit the template fully.

   (使用ng-select2，您可以在其中完全编辑模板。)

   Check the Demo here to make sure it whether or not it works for you.

   (在此处检查演示，以确保它是否对您有用。)