What is a pTemplate in PrimeNG?

Question

I was going through the documentation of PrimeNG 4.3.0 for p-tree here, and came across this example where they are using a pTemplate attribute, but I am unable to understand what it does or how it works.

<p-tree [value]="files">
    <ng-template let-node pTemplate="default">
        <input [(ngModel)]="node.label" type="text" style="width:100%">
    </ng-template>
</p-tree>

Could someone please explain what the purpose of pTemplate is?

Answer 1

The only purpose of this directive is to hold ng-template reference (with some unique key assigned with it). Later inside parent component it is possible to grab the list of pTemplate directives:

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

This list is a pair of string key and TemplateRef value.

This mechanism allows software developers to use multiple ng-templates and inject them to *ngTemplateOutlet directives in parent component.

<p-tree [value]="files">
    <ng-template let-node  pTemplate="picture">
        <img [attrs.src]="picture.path">
    </ng-template>
    <ng-template let-node  pTemplate="default">
        <input [(ngModel)]="node.label" type="text" style="width:100%">
    </ng-template>
</p-tree>