Navigation

Наступним кроком роботи з роутінгом є повноцінна html навігація, з допомогою якої ми і здійснюємо переходи між сторінками, а в даному випадку компонентами або модулями аплікації.

Розглянемо директиви routerLink та routerLinkActive.

Директива routerLink слугує для визначення адреси по якшї буде здійснюватися навігація.

navbar.component.html

<a routerLink="todos">Todos</a>
<a routerLink="about">About</a>

Для стилізації активних посилань застосовується спеціальна директива routerLinkActive, яка додає вказаний css клас до активного посиланням.

navbar.component.html

<li routerLinkActive="active">
  <a routerLink="todos">Todos</a>
</li>

<li routerLinkActive="active">
  <a routerLink="about">About</a>
</li>

Завдання

• Створити компоненту navbar та додати базову розмітку для навігвції використовуючи Bootstrap.

cmd

ng g c components/navbar

navbar.component.html

<nav class="navbar navbar-dark bg-dark app-navbar">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link"
         href="#">Todos</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-link"
         href="#">About</a>
    </li>
  </ul>
</nav>

navbar.component.css

.app-navbar .navbar-nav {
  flex-direction: row;
}

.app-navbar .nav-item:not(:last-child) {
  margin-right: 16px;
}

app.component.html

<app-navbar></app-navbar>