Menu

TS

headerData = {
    menuItems: [
      { id: 1, name: '/' },
      { id: 2, name: 'About' },
      { id: 3, name: 'Services' },
      { id: 4, name: 'Contact' }
    ],
};

HTML

<ul class="nav">
    <li 
      *ngFor="let item of headerData.menuItems"
      routerLinkActive="current-menu-item"
      [routerLinkActiveOptions]="{exact: true}">
        <a routerLink="{{item.slug}}">{{item.name}}</a>
    </li>
</ul>

Bootstrap Header