Create a my-nav component

[web-dave]

Generiere eine neue Angular Component.

Lokal

ng g component top-nav

Online

1. Rechtsklick auf den src Ordner in der Projekt Section.
2. Klick auf Angular Generator
3. Component auswählen
4. Name top-nav im Promt eingeben und bestätigen
5. Komponente im AppModule in declarations array eintragen

Component einbinden

Finde src/app/app.component.html ersetzte alles durch

<app-top-nav></app-top-nav>

<router-outlet></router-outlet>

setup TopNav

top-nav.component.html

<div class="topnav">
  <a href="#films">films</a>
  <a href="#people">people</a>
  <a href="#planets">planets</a>
  <a href="#species">species</a>
  <a href="#starships">starships</a>
  <a href="#vehicles">vehicles</a>
</div>

src/styles.scss

app-top-nav {
  .topnav {
    background-color: #333;
    overflow: hidden;
    a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      &:hover {
        background-color: #ddd;
        color: black;
      }
      &.active {
        background-color: #04aa6d;
        color: white;
      }
    }
  }
}

[web-dave]

Next