#

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 {

  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

 

Mobile

.

0123movie.net