Primeng - Schaltfläche in der Auswahllistenkopfzeile hinzufügen

Question

Wie kann ich benutzerdefinierte Schaltfläche in der Auswahllistenkopfzeile hinzufügen, z. B. in here? Ich versuche, Schaltfläche in Primeng Picklist-Header hinzuzufügen, aber es nimmt nur String als Header-Wert. Gibt es eine Möglichkeit, eine Vorlage (HTML) in automatisch generierten Header hinzuzufügen?

<p-pickList 
    sourceHeader="Available" targetHeader="Selected> 
</p-pickList> 

Answer 1

Sie können p-picklist und fügen Sie den Knopf in Ihrer Verlängerung Vorlage

import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core'; 
import { PickList, DomHandler } from 'primeng/primeng'; 
import { ObjectUtils } from 'primeng/components/utils/objectutils'; 

@Component({ 
    selector: 'ex-pick-list', 
    templateUrl: 'pick-list.component.html', 
    styleUrls: ['pick-list.component.scss'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class PickListComponent extends PickList { 

    constructor(el: ElementRef, domHandler: DomHandler, objectUtils: ObjectUtils) { 
     super(el, domHandler, objectUtils); 
    } 

} 

<div class="pick-list-container"> 
    <!-- put the original html from the primeng pick list component "moveRight()" now you can use moveRight from PickList --> 

     <div class="custom-buttons"> 
       <button pButton type="button" (click)="moveRight()" class="ui-[label]="''"></button> 
      </div> 
    </div> 
</div>