After some troubleshooting, I finally managed to get everything up and running smoothly!

Upon closer inspection, I discovered the root of my issue:

The problem arose when new HTML elements were generated using *ngIf, resulting in them not being displayed due to a different processing method compared to other menu elements.

I initially sought ways to reload or re-render the template with these 'new' elements but was unable to locate where to trigger a component or its template for reloading. However, I took a different approach and integrated the logic responsible for processing the menu into my updated template instead.

(For those seeking a shorter explanation, skip to the bottom for the Summary)

To address this, I delved deep into my template's logic and crafted a directive devoted to rendering the menu:

MenuDirective (directive)

@Directive({
selector: '[menuDirective]'
})
export class MenuDirective implements OnInit, AfterContentInit {

constructor(private menu: ElementRef,
          private router: Router,
          public layoutService: LayoutService) {
this.$menu = $(this.menu.nativeElement);
}

// Extensive rendering of layout

ngAfterContentInit() {
    this.renderSubMenus(this.$menu);
}

renderSubMenus(menuElement) {
        menuElement.find('li:has(> ul)').each((i, li) => {
            let $menuItem = $(li);
            let $a = $menuItem.find('>a');
            let sign = $('<b class="collapse-sign"><em class="fa fa-plus-square-o"/></b>');
            $a.on('click', (e) => {
                this.toggle($menuItem);
                e.stopPropagation();
                return false;
            }).append(sign);
        });
}
}

This directive serves as the cornerstone for generating the menu layout according to the existing HTML elements. Notably, I isolated the behavior associated with processing menu elements, such as inserting the '+' icon and implementing the submenu functionality, within the renderSubMenus() function.

How does renderSubMenus() operate:

It iterates through the DOM elements of the provided nativeElement parameter and enforces the necessary display logic to render the menu correctly.

menu.html

<ul menuDirective>    
<li ibos-navigation-element></li>
<li>
    <a href="#"><i class="fa fa-lg fa-fw fa-shopping-cart"></i> <span
                        class="menu-item-parent"></span></a>
    <ul>
        <li routerLinkActive="active">
            <a routerLink="/orders/ordersMain"></a>
        </li>
    </ul>
</li>        
</ul>

These steps outline how the menu is constructed.

Next, we explore the IBOsNavigationElement component embedded in the menu via the attribute [ibos-navigation-element].

IBOsNavigationElement (component)

@Component({
selector: '[ibos-navigation-element]',
template: `
    <a href="#"><i class="fa fa-lg fa-fw fa-group"></i> <span
            class="menu-item-parent"></span>
    </a>
    <ul class="renderMe">
        <li routerLinkActive="active">
            <a routerLink="/ibos/IBOsMain"></a>
        </li>
        <li *ngIf="navigationList?.length > 0">
            <a href="#"><</a>;
            <ul>
                <li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList">
                    <a href="#/ibos/IboDetails/{{navigatedIBO['id']}}"></a>;
                </li>
            </ul>
        </li>
    </ul>
`
})
export class IBOsNavigationElement implements OnInit, DoCheck {
private $menuElement: any;
private navigationList = [];
private menuRendered: boolean = false;

constructor(private navigationService: NavigationElementsService, private menuDirective: MenuDirective, private menuElement: ElementRef) {
this.$menuElement = $(this.menuElement.nativeElement);

this.navigationService.updateIBOsNavigation$.subscribe((navigationData) => {
        this.navigationList.push(navigationData);
        log.d('I received this Navigation Data:', JSON.stringify(this.navigationList));
    }
);
}

ngOnInit() {
}

ngDoCheck() {
if (this.navigationList.length > 0 && !this.menuRendered) {
    log.er('calling renderSubMenus()');
    this.menuDirective.renderSubMenus(this.$menuElement.find('ul.renderMe'));
    this.menuRendered = true;
}
}
}

In this context, I made several noteworthy changes...

1. I imported the MenuDirective directive to invoke its renderSubMenus() method.
2. By utilizing ElementRef and find(), I selected the specific code block that needed to be passed to

   this.menuDirective.renderSubMenus()

   . This selection was based on its class, as seen here:

   this.$menuElement.find('ul.renderMe')

   .
3. I implemented Angular's DoCheck hook to detect and react to desired changes. Within the ngDoCheck() method, I checked if the list navigationList was populated and if I had previously rendered this snippet of code (to address issues arising from excessive rendering).

Summary:

To 'reload' the template:

1. I created a directive housing a method that mirrors the standard initialization logic.
2. I instantiated this directive within the target component requiring reloading.
3. Using ElementRef, I pinpointed the template segment earmarked for 'reloading'.
4. Determining when to execute the 'reload' method (in this case, through ngDoCheck()). Alternatively, one could call this method at will.
5. By invoking the directive's 'reload' method while passing the designated template section (or even the entire template), it mirrors the same logic applied when instantiating the component with hidden elements utilizing *ngIf.
6. In essence, no actual reloading of the component occurred; rather, by applying the identical logic to the component's template, the illusion of a reload takes place.

All in all, this workaround proved effective in bypassing the need for an actual component reload.