Navigatie.

In de navigatie staat voorlopig zowel de login- als de logout-link zichtbaar. Dit ga je nu aanpassen zodat maar één van de twee links zichtbaar blijft.
Zodra de gebruiker is ingelogd, verschijnt zijn naam en zijn foto net voor de logout-link.

Component aanpassen.

In de component hoef je enkel nog de authService in de constructor te injecteren. Let op: ook hier weer public injecteren zodat de template toegang krijgt tot de service.

• Wijzig de code op src/app/navbar/navbar.component.ts.

Template aanpassen.

• Wijzig de code op src/app/navbar/navbar.component.html.

• Logout
  De li-tag is enkel zichtbaar indien authService.isLoggedIn true is.
  Het click-event verwijst rechtstreeks naar de methode logout() van de authService.
• Login
  De li-tag is enkel zichtbaar indien authService.isLoggedIn false is.
• photoURL en displayName
  Plaats net voor login-link een span-tag met daarin een img-tag die verwijst naar authService.userData.photoURL en toon de authService.userData.displayName. De span-tag is enkel zichtbaar als authService.isLoggedIn true is.

CSS aanpassen.

De foto is nog veel te groot om deftig binnen de navigatie te passen. Ook alle buttons op de verschillende pagina's krijgen nog niet het klassieke vingertje als je er over zweeft. Hoog tijd dus om de CSS wat bij te sturen.

Omdat de buttons op meerdere plaatsen voorkomen, kan je de eigenschappen best in het globale CSS-bestand aanpassen.

• Wijzig de code op src/styles.css.