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 -s - 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 ng-bootstrap.
- Open src/app/sharedModules/ng-bootstrap.module.ts en importeer NgbCollapseModule.
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 isCollapsed) die bepaalt of div#navbarContent in de template zichtbaar (isCollapsed = false) of onzichtbaar (isCollapsed = true) 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 het 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 { isCollapsed = true; // true -> verberg menu, false -> toon menu ... } - Wijzig de code op scr/app/navbar/navbar.component.html:
