Issues with Bootstrap navbar-nav when using ngFor

  angular, bootstrap-4, navbar, ngfor

Hi I am using bootstrap v4.0.0. When displaying menus using navbar-nav and using ngFor, the bound property is called all the time – is this expected behavior?

HTML code snippet:

<div class="collapse navbar-collapse" id="navbar-content">
    <div class="navbar-nav mr-auto">
      <ul class="navbar-nav">
        <ng-container *ngFor="let navItem of NavItems">          
          <li class="nav-item">
            <a class="nav-link" [routerLink]="[navItem.url]" routerLinkActive="active" [target]="navItem.isLink ? '_blank' : null">{{navItem.displayName}}</a>
          </li>
        </ng-container>
    </ul>
  </div>
</div>

component.ts code snippet:

private _navItems: object;
get NavItems() { // This API is called continuously even after the menu items are loaded
   if(!this._navItems){
    this._navItems=  [
      {
        "displayName": "TestApp",
        "url": "testApp",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": []
      },
      {
        "displayName": "Custom Control",
        "url": "custom",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": [
          {
            "displayName": "JQX Custom Grid",
            "url": "custom/grid",
            "isLink": true,
            "requiredRoles": []
          }
        ]
      }
    ];
   }
   return this._navItems;
  }

get NavItems binding is called all the time even when nothing has changed.

  • Is this expected behavior?
  • Is there a better approach?

Thanks,

RDV

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.