How trigger component creation even if hidden

Question

Using Angular, my page has multiples components included in NgbNav. Basically, When each component loads, it calls an API and displays a list. The component also emit an event, telling the parent component how much data was found. I use this information to display it in the tab.

Before I click on the second tab : No data.

After I clicked on the second tab : The child component fetched the list, emitted the event and the tab was updated with the total count :

---

How can I trigger the component creation even if it is hidden in the tab, not shown yet ?

Answer 1

You can use [destroyOnHide]="false" attribute along with ngbNav ( api: https://ng-bootstrap.github.io/#/components/nav/api ). In this case, your hidden tabs will always be present in DOM. See a demo https://stackblitz.com/edit/angular-odykfr?file=src%2Fapp%2Fnav-basic.html