navbar.component.html

<nav class="navbar navbar-expand-md navbar-dark py-0 mb-4">
  <div class="container px-0">
    <a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
      <img src="{{ navbar.logo }}" alt="{{ navbar.name }} logo" title="{{ navbar.title }}" height="60px"/>
    </a>
    <button class="navbar-toggler" type="button" (click)="toggleNavbar()">
      <span class="fa fa-bars"></span>
    </button>
    <div id="navbar" class="collapse navbar-collapse" [class.collapse]="navbarCollapsed">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" *ngFor="let link of navbar.links">

          <!-- Simple link -->
          <div *ngIf="!link.subMenu">
            <a class="nav-link d-flex align-items-center"
               [href]="link.url" target="_blank">{{ link.label }}</a>
          </div>

          <!-- OR Dropdown button -->
          <div *ngIf="link.subMenu" class="dropdown-container" ngbDropdown>

            <!-- Toggle button -->
            <a class="nav-link d-flex align-items-center dropdown-toggle" ngbDropdownToggle
               role="button"
               aria-haspopup="true"
               aria-expanded="false">
              {{ link.label }}
            </a>

            <!-- Items -->
            <div class="dropdown-menu" ngbDropdownMenu>
              <div *ngFor="let subItem of link.subMenu">
                <a class="dropdown-item"
                   target="_blank"
                   [href]="subItem.url">
                  {{ subItem.label }}
                </a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <a class="navbar-brand d-flex align-items-center"
       [href]="navbar.contributor.url" target="_blank">
      <img src="{{ navbar.contributor.logo }}" alt="{{ navbar.contributor.name }} logo" height="60px"/>
    </a>
  </div>
</nav>