#Template variable issue
3 messages ยท Page 1 of 1 (latest)
You're right. Here's an example:
<p-multiSelect
[options]="values$ | async"
[ngModel]="selectedValues$ | async"
[pTooltip]="
showTooltip
? (selectedValues$ | async )
: null
"
<ng-template let-selectedLayers pTemplate="selectedItems">
{{ test(selectedLayers) }}
<ng-container *ngFor="let item of selectedLayers">
<div>
<span [innerHTML]="item.name"></span>
</div>
</ng-container>
</ng-template>
</p-multiSelect>
Just to clarify stuff, selectedValues$ emits the value correctly, because the tooltip is working, meaning that template variable should be working as well, since its reference value is emitted. The problem here is that items are not rendered inside ng-template. I also added {{ test(selectedLayers) }} for testing purposes. My question is, if values are emitted correctly and template variable reference value works properly, how is it undefined (test function logs undefined)?
Here's a complete minimal example using the code you posted for the template. i had to imagine the code you might have in the component, since you didn't post it. My reproduction seems to work fine: it shows the selected items.
So, do what is explained in #how-to-get-help : provide a complete minimal reproduction of your issue as a stackblitz. You can fork mine and update it until it reproduces your issue.
https://stackblitz.com/edit/muzbtt?file=src%2Fapp%2Fdemo%2Fmulti-select-template-demo.html,src%2Fapp%2Fdemo%2Fmulti-select-template-demo.ts
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.