Search code examples
angularaccordionprimengng-template

ng-template issue in PrimeNG accordion

I wanted to create custom header and content in PrimeNG accordion component. Unfortunately the result is this:

enter image description here

The main issue is that header is displayed only after clicking on accordion tab:

enter image description here

From this moment, header will be shown also when tab accordion is closed:

enter image description here

Any ideas about how troubleshooting this issue? Please note that Header is just a placeholder, it will be replaced by custom content.

below is my code, no custom css has been applied to accordion and container tabs:

<p-tabView>
    <p-tabPanel header="Options" leftIcon='pi pi-cog'>
        <p-accordion multiple="false">
            <p-accordionTab [selected]="false">
                <ng-template pTemplate="header">Header</ng-template>
                <ng-template pTemplate="content">Content</ng-template>
            </p-accordionTab>
        </p-accordion>
    </p-tabPanel>
</p-tabView>
Solution

  • Remove selected property from p-accordionTab should correct your problem.

    Replace <p-accordionTab [selected]="false"> with <p-accordionTab> (especially since default value of selected is false).