How trigger component creation even if hidden
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 ?
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
- Style Indeterminate Checkboxes in Angular Material
- Array of data showing in console but not in HTML after passing it through dialog in Angular project
- Angular Font Awesome in a component library - FontAwesome: Could not find icon with iconName=times and prefix=fas
- Angular and contenteditable
- Angular D3 tree does not collapse back into its parent
- How to work with leaflet polyline's context menu
- Is it possible have working Angular i18next multilingual translations after page reload and without component lazy loading?
- How do I auto scroll in Angular?
- QR Scan in Angular
- Angular material: create a divider between mat-tab-labels
- Customize third party directive's implementation without forking
- How to run your project without hash in Angular
- In Angular 17, trying to clean an input after the user arrives in the page via back button generates non-coherent values
- How to upgrade TailwindCSS?
- Angular forms with signals (making it ready for zoneless change detection)
- changing element in ngOnInit not working when changing route, but is able to access element
- this.dialogRef.close is not a function Angular 19
- Using Angular Signals with HostBinding to update style?
- TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"
- Angular can't find toggle function in model
- Angular 19 - Component AppComponent is standalone, and cannot be declared in an NgModule
- p-dropdown does not display correct label when ngModel variable is an object
- Ionic Capacitor Google Maps error (@capacitor/google-maps)
- Angular currency pipe without value
- How to figure out which Angular unit test caused an error
- Ngx-color picker issue with data value in reactive forms
- Angular module loading children, child route is not initialising on router.navigate
- import {saveAs} from 'file-saver': CommonJS or AMD dependencies can cause optimization bailouts
- How to import highcharts-more
- Custom directive and [ngClass] on same element does not work