Angular Component navbar erstellen
Mit VSCode->Terminal eine Navbar Component erstellen
ng g c components/navbar |
Oder
ng generate component components/navbar |
Dann in app.components.ts den Title entfernen
export class AppComponent { }
|
In app.component.html allen Template Inhalt löschen und durch App-navbar ersetzen
Entsprechend der selector Bezeichnung in navbar.componet.ts
<app-navbar></app-navbar>
|
Im localhost ergibt sich dann http://localhost:4200/
Dann in Bootstap eine Navbar holen
https://getbootstrap.com/docs/4.0/components/navbar/
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav>
|
Bootstrap NavBar Code in navbar.component.html
Wenn man den html Code von Bootstrap in die Datei navbar.component.html kopiert, dann übernimmt die Ausgabe sofort problemlos eine Navigationsbar an der Topseite
Danach den Title austauschen von NavBar zu Zeiterfassung