header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a routerLink="/recipes" class="navbar-brand">Recipe Book</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/recipes">Recipes</a></li>
        <li routerLinkActive="active">
          <a routerLink="/shopping">Shopping List</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" role="button"
            >Manage <span class="caret"></span
          ></a>
          <ul class="dropdown-menu">
            <li><a (click)="onUpdateData()">Save Data</a></li>
            <li><a (click)="onFetchData()">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>