Angular Component navbar erstellen
Mit VSCode->Terminal eine Navbar Component
erstellen
Oder
|
ng generate component components/navbar
|
Dann in app.components.ts den Title entfernen
|
export class AppComponent {
title = 'Zeiterfassung';
}
|
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
