ng-select reusable templates

Question

I'm using ng-select (https://github.com/ng-select/ng-select) library to work with multiselect drop down lists. It works great but now I need to reuse my ng-templates and I'm kind of lost. I started working on Angular 10 a few weeks ago and Googled enough to realize I need some help.

My ng-template looks like this:

<ng-template ng-header-tmp let-item$="item$">
  <div>
      <input type="text" appAutofocus class="form-control input-sm ng-select-search-box" placeholder="Filter" (input)="ngSelectControl.filter($event.target.value)">
  </div>
  <div>
      <button class="btn btn-link btn-sm" (click)="selectAll()"><i class="fas fa-check"></i> All</button>
      <button class="btn btn-link btn-sm" (click)="ngSelectControl.clearModel()"><i class="fas fa-times"></i> None</button>
  </div>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
  <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item[ngSelectControl.bindLabel]}}

  <ng-template ng-multi-label-tmp let-items="items" let-items$="items$" let-index="index" let-clear="clear">
    <div class="ng-select-selected-items">
      <div class="ng-value" *ngFor="let item of items; let last = last">
        <span>{{item[ngSelectControl.bindLabel]}}</span><span *ngIf="!last">, </span>
      </div>
    </div>

  </ng-template>
</ng-template>

It works fine when it's inside the ng-select but, because I want to have the same functionality for all my drop down lists, I want it to be reusable. My idea was to move the ng-template to a component (ng-select-search-template) and then render that component inside the ng-select but that didn't work. It's completely ignored.

<ng-select #apiQueues [items]="Filters?.TaskQueues" [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="FriendlyName" bindValue="Sid" placeholder="[Queues]" [selectableGroup]="true" [selectableGroupAsModel]="false" [(ngModel)]="Filters?.Selection.TaskQueueIds">
            <ng-select-search-template [ngSelectControl]="apiQueues"></ng-select-search-template></ng-select>

Answer 1

I ended up creating a component that wraps ng-select. I'm sharing the code just in case someone is trying to achieve the same thing:

component html:

<ng-select
  #ngSelectControl [items]="items" [multiple]="true" [closeOnSelect]="false" [searchable]="false"
  bindLabel="{{bindLabel}}" bindValue="{{bindValue}}" placeholder="{{placeholder}}" [selectableGroup]="true" [selectableGroupAsModel]="false"
  [(ngModel)]="model" (ngModelChange)="modelChange.emit(model)">
  <ng-template ng-header-tmp let-item$="item$">
    <div>
        <input type="text" appAutofocus class="form-control input-sm ng-select-search-box" placeholder="Filter" (input)="ngSelectControl.filter($event.target.value)">
    </div>
    <div>
        <button class="btn btn-link btn-sm" (click)="selectAll()"><i class="fas fa-check"></i> All</button>
        <button class="btn btn-link btn-sm" (click)="ngSelectControl.clearModel()"><i class="fas fa-times"></i> None</button>
    </div>
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
    <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item[ngSelectControl.bindLabel]}}

    <ng-template ng-multi-label-tmp let-items="items" let-items$="items$" let-index="index" let-clear="clear">
      <div class="ng-select-selected-items">
        <div class="ng-value" *ngFor="let item of items; let last = last">
          <span>{{item[ngSelectControl.bindLabel]}}</span><span *ngIf="!last">, </span>
        </div>
      </div>

    </ng-template>
  </ng-template>
</ng-select>

component ts code:

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

@Component({
  selector: 'wz-multiselect',
  templateUrl: './wz-multiselect.component.html',
  styleUrls: ['./wz-multiselect.component.css']
})
export class WzMultiselectComponent implements OnInit {

  @Input() items: any;
  @Input() bindLabel: string;
  @Input() bindValue: string;
  @Input() placeholder: string;
  @Input() model: any;
  @Output() modelChange = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  selectAll() {
    this.model = this.items.map(p => p[this.bindValue]);
    this.modelChange.emit(this.model);
  }

}