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:
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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.