Can dom be hidden inside ng-template

Question

I use ng-bootstrap to create Popover with HTML and bindings. ng-template will always be recreate at time I click botton and my component need sometime to initialize so I should hide it instead. How could I hide ng-template?

ps. I'm not native english, pardon me if I confuse you.

I have try using ng-container but ngbPopover seem 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">ชั้นข้อมูล</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>

I expect to create app-core-toc on init. When I click button my template is just hide or show.

Would be ngIf solve the problem ? I dont understand cleary about your question — Tony Ngo
I try using <div #popLegend> but seem ngbPopover only accept ng-template but using it will always destroy the template. What should I do? — user2527030
What is library you currently using ? Also can you create minial code for me on stackblitz.com ? — Tony Ngo

IAfanasov IAfanasov · Accepted Answer · 2019-07-26T16:09:48

Explorer ng-bootstrap sources - it's impossible in version 5.1.0. It always creates an embedded view. Could be changed in the future. Feel free to propose such a feature at https://github.com/ng-bootstrap/ng-bootstrap/issues

Can dom be hidden inside ng-template

1 Answers