Calling javascript event in Angular after DOM is fully loaded - async pipe

I'm new to Angular and trying to execute custom JS event (NavigationContentLoaded) when all categories are fetched from service and displayed but I'm unable to find correct event for that. Here is my component:

ngOnInit() {
this.categories$ = this.shoppingFacade.navigationCategories$();
this.deviceType$ = this.appFacade.deviceType$;
}


And here is html:

<ng-container *ngFor="let category of categories$ | async">
<li *ngIf="!category.isRoot" [ngClass]="hasChildren(category) ? 'has-submenu' : ''">
<a
[routerLink]="hasChildren(category) && (deviceType$ | async) === 'mobile' ? undefined : category.url"
class="main-navigation__link"
[attr.data-testing-id]="category.uniqueId + '-link'"
>
{{ category.name }}
</a>
<ish-sub-category-navigation
[categoryUniqueId]="category.uniqueId"
[subCategoriesDepth]="1"
[view]="view"
[parentCategoryName]="category.name"
[parentCategoryUrl]="category.url"
*ngIf="hasChildren(category)"
/>
</li>
</ng-container>


Problem is that all 'li' elements must be fully loaded and displayed before I can trigger "NavigationContentLoaded" event which expects fully loaded navigation (it queries HTML nodes). I tried all Angular events (AfterViewInit, AfterViewChecked, AfterContent..., afterNextRender) but they do not work as they are triggered before observable and async pipe is finished rendering. Only solution which I found until now is to wait until whole Angular application is stable, but that takes too much time as whole page needs to be fully loaded and I just need that my navigation component is finished rendering. Does anyone knows if this is possible? It is Angular 16.

Thank you for your help!

Continue reading...