Why am I obtaning this strange rendering behavior putting ng-template into an accordion tab?

Question

I am working on an Angular application using PrimeNG and I have the following problem using PrimeNG Accordion.

This is the HTML code of my component:

<div class="container">  

    <p-selectButton [options]="editPatientOption"
                    [(ngModel)]="editPatientSelectedOption"
                    (onChange)="editPatientOptionOnChange($event, 5)"></p-selectButton>

    <div *ngIf="editPatientSelectedOption=='info';then info_content else edit_content">here is ignored</div>

    <p-accordion [multiple]="true">

        <p-accordionTab header="ANAGRAFICA PAZIENTE">
            TEST
            <ng-template #info_content>
                INFO
            </ng-template>
        
            <ng-template #edit_content>
                EDIT
            </ng-template>
                
        </p-accordionTab>
    
        <p-accordionTab header="CARTELLA CLICNICA">
            <app-medical-record-add-form></app-medical-record-add-form>
        </p-accordionTab>
        <p-accordionTab header="VALUTAZIONE ESTETICA">
            Content 3    
        </p-accordionTab>
        <p-accordionTab header="CRONOLOGIA TRATTAMENTI SVOLTI">
            Content 3    
        </p-accordionTab>
    </p-accordion>

</div>

As you can see I am checking the value of the editPatientSelectedOption component property in order to select the related ng-template. Then ito the first accordion tab I put these ng-template in order to dipslay the content of the selected template into my accordion tab. But this is what happens:

If the **editPatientSelectedOption=='info' it is rendered in this way:

How can you see the info content (highlited) appears outside of my accordion tab.

Same thing if the **editPatientSelectedOption !='info' it is rendered in this way:

Why the content of the template is correct (it is the expected one) but is rendered outside the expected place (the accordion tab). What is happening? What am I missing? How can I fix this behavior?

Answer 1

This seems like it's working as expected to me. This is happening because of where your div is defined handling the toggling between those templates. For instance, you could move your ng-template declarations to anywhere else in that template and you would have the same behavior because where those are defined doesnt matter, but where your div using them is defined would matter.

 <div *ngIf="editPatientSelectedOption=='info';then info_content else edit_content">here is ignored</div>

Move the above to where you want the text to show up and it should work correctly.