Utilizing ng-bootstrap, I am creating a Popover with HTML and bindings. However, the ng-template keeps getting recreated every time I click the button, causing a delay in the initialization of my component. Is there a way to hide the ng-template instead?
Note: English is not my native language, so please forgive any confusion.
I have attempted using ng-container, but ngbPopover seems to only accept ng-template.
<button type="button" class="card tools-toc btn btn-outline-primary"
#popover="ngbPopover" [ngbPopover]="popLegend" [ngClass]="{'active': popover.isOpen()}"
placement="top" [autoClose]="false" popoverClass="popover-legend" (click)="toggleToc()">
<i class="fas fa-layer-group"></i>
</button>
<ng-template #popLegend>
<div>
<div class="legend-title">Data Layers</div>
<div >
<app-core-toc [config]="_configService[1]" [omElec]="true">
</app-core-toc>
<app-core-toc [config]="_configService[0]" [omWork]="true">
</app-core-toc>
</div>
</div>
</ng-template>
My goal is to initialize app-core-toc on load and then simply hide or show the template when the button is clicked.