3

Is there an angular 2+ multi-select dropdown that has a custom trigger button?

I'm looking for something similar to the old AngularJS "custom trigger element using transclusion" (here)...however, ng-select, ng-multiselect-dropdown and other do not seem to offer this.

I'm looking for any viable options with example code.

enter image description here

user749798
  • 5,210
  • 10
  • 51
  • 85
  • 2
    It doesn't look like that is currently possible with that control. Your best bet is probably to submit an issue to the [Github Repo](https://github.com/nileshpatel17/ng-multiselect-dropdown/issues) or fork it and modify it. – Dean Jan 13 '19 at 01:14
  • You can use,e.g. the ngb-dropdown with autoclose="outside", and "work" with the options, see a simple stackblitz in https://stackblitz.com/edit/angular-w1alg4?file=app/dropdown-basic.html – Eliseo Jan 17 '19 at 07:53

1 Answers1

2

Complementary my comment, the component becomes

.html

<div ngbDropdown class="d-inline-block" autoClose="outside">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
        {{data.length?data.length+' checked':'Select'}}
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item" *ngFor="let option of options" (click)="check(option)">
          <span *ngIf="option.checked">~ </span>{{option.label}}
        </button>
  </div>
</div>

.ts

import {Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
  @Input() options;
  @Output() change = new EventEmitter<any[]>();
  data:any[]=[];
  check(option)
  {
    option.checked=!option.checked;
    this.data=this.options.filter((x:any)=>x.checked).map(x=>
      {
        return {id:x.id,label:x.label}
      })
    this.change.emit(this.data);
  }
}

stackblitz

You can easy convert in custom form control

Eliseo
  • 50,109
  • 4
  • 29
  • 67