Primeng - add button in picklist header

Question

How can I add custom button in in picklist header, like, in here? I'm trying to add button in Primeng picklist header, but it only takes string as a header value. Is there a way to add any template (HTML) in automatically generated header?

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

Please, be more detailed on your question. What is it you are trying to achieve, what are the things you tried and the errors you face. If you provide code, please provide some details about it. Enjoy Stackoverflow :-) — Fabien

Flavio Gilardino flavioagilard Flavio Gilardino flavioagilard · Accepted Answer · 2017-08-23T14:47:14

you can extend p-pickList and add the button in your extending template

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>

Primeng - add button in picklist header

1 Answers