Navigatie.
Voor de navigatie maak je een nieuwe component (navbar) aan die je vervolgens op de startpagina integreert.
- Maak een navbar-component.
$ ng g c navbar --no-spec -is -m app - Wijzig de code op src/app/app.component.html:
- Wijzig de code op src/app/navbar/navbar.component.html:
Op een klein scherm, verdwijnen de links achter het hamburgermenu. Voor het open- en dichtklappen van het menu maken we gebruik van de collaps-module van ngx.
- Open src/app/ngx.module.ts en importeer CollapsModule.
Voeg de module aan de imports-array en aan de exports-array toe.
De configuratie is vrij simpel. Het enige wat we nodig hebben, is een variable (bv navCollaps) die bepaalt of div#navbarContent in de template zichtbaar (navCollaps = true) of onzichtbaar (navCollaps = false) is. Met een click-event op het hamburgermenu kan je dan de toestand van de navCollaps omkeren.
Ook als je op een link binnen div#navbarContent klikt, moet de toestand omkeren. Logischerwijze ga je dan het click-event op elk van deze links plaatsen, maar hat kan eenvoudiger door het click-event rechtstreeks op div#navbarContent te plaatsen.
- Voeg aan scr/app/navbar.navbar.component.ts de variabele navCollaps toe:
export class NavbarComponent implements OnInit { navCollaps = true; // true -> zichtbaar, false -> verberg ... } - Wijzig de code op scr/app/navbar.navbar.component.html:
