Why are comments for ng-container and bindings being shown in the HTML of the deployed Angular Component?

Issue

I have an Angular 12 application using Bootstrap with a navbar that I’m trying to show menu items for. Some menu items have a dropdown with submenu items, but some do not. I’m using ng-component and ng-template to try and control the HTML logic of what to show depending on if there are submenu items or not. My intent with using those was because I needed to have the <li> element have a class of dropdown if there were submenu items.

When I inspect the HTML of my navbar in Chrome DevTools, I see a number of comments of <!--bindings-->,<!--container-->, and <!--ng-container-->.

Why are those there and how do I remove those? Are they because of my use of ng-component and ng-template? If so, what’s a better way for me to restructure the HTML so that they don’t pollute the HTML?

This is the HTML of the component:

<header class="navbar navbar-expand-lg navbar-light bg-light d-flex px-5">
    <a class="navbar-brand" href="/">
        <img src="logo-black.png" alt="Logo in the color black"/>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" (click)="isMenuCollapsed = !isMenuCollapsed" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <ng-container *ngFor="let menuItem of menuItems">
                <ng-container *ngIf="menuItem.Children.length > 0; then thenMenuDropdownBlock; else elseMenuItemBlock"></ng-container>
                <!--Menu item with submenus-->
                <ng-template #thenMenuDropdownBlock>
                    <li class="nav-item dropdown">
                        <div ngbDropdown class="d-inline-block">
                            <a class="nav-link" id="dropdownBasic1" ngbDropdownToggle>{{ menuItem.Title }}</a>
                            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                                <a class="nav-link" *ngFor="let childMenuItem of menuItem.Children" [attr.href]="childMenuItem.Url">{{ childMenuItem.Title }}</a>
                            </div>
                        </div>
                    </li>
                </ng-template>
                <!--Menu item without submenus-->
                <ng-template #elseMenuItemBlock>
                    <li class="nav-item">
                        <a class="nav-link" [attr.href]="menuItem.Url">{{menuItem.Title}}</a>
                    </li>
                </ng-template>
            </ng-container>
            <!--User Login-->
            <li class="nav-item" *ngIf="(user$ | async) === null; else userLoggedIn">
                <a class="nav-link nav-navigator-btn btn btn-sm btn-dark rounded-lg" type="button" (click)="signIn()"><span><img class="pr-2" alt="Logo of dark arrow head in yellow circle" src="nav.png" /></span>Sign In / Register</a>
            </li>
            <ng-template #userLoggedIn>
                <li class="nav-item dropdown" style="text-transform: none !important;">
                    <div ngbDropdown class="d-inline-block">
                        <a class="nav-link" id="dropdownBasic1" ngbDropdownToggle >Welcome... {{ (user$ | async)?.FirstName }}</a>
                        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                            <a class="nav-link" routerLink="/logout">Logout</a>
                        </div>
                    </div>
                </li>
            </ng-template>
        </ul>
    </div>
</header>

When I inspect the HTML via Chrome DevTools, these are the comments being added to the HTML:

enter image description here

I’d love not to have those polluting the HTML if possible. Is there a way that I could remove them? Is there something I’m doing wrong that is adding them?

Solution

I’ve determined that they are hooks used by Angular.

Answered By – JHizzal

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.