Como fazer as rotas e aparicao da navbar

Olá Estudante, tudo bem com você?

Uma solução mais simples e direta, é usar uma variável de controle no componente da navbar para exibi-la ou ocultá-la com base na página atual. Dito isto, no arquivo cabecalho.component.ts iremos criar uma variável que irá acompanhar as alterações de rota e ao navegar para a página de login (/home) a navbar será ocultada, e ao navegar para qualquer outra página, a navbar será exibida. Faremos isso por meio da cláusula if (ngIf) no arquivo cabecalho.componenet.html.

Abaixo, os códigos para alcançar este objetivo:

cabecalho.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { UsuarioService } from 'src/app/autenticacao/usuario/usuario.service';

@Component({
  selector: 'app-cabecalho',
  templateUrl: './cabecalho.component.html',
  styleUrls: ['./cabecalho.component.css'],
})
export class CabecalhoComponent {
  user$ = this.usuarioService.retornaUsuario();
  mostrarNavbar: boolean = false;

  constructor(private usuarioService: UsuarioService, private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // Verifique se a rota atual é diferente da rota de login
        this.mostrarNavbar = event.url !== '/home';
      }
    });
  }

  logout() {
    this.usuarioService.logout();
    this.router.navigate(['']);
  }
}

cabecalho.componenet.html

<ng-container *ngIf="mostrarNavbar">
  <header class="sticky-top">
    <nav class="navbar navbar-light bg-white">
      <a class="navbar-brand">Gatito Book</a>
      <div *ngIf="user$ | async as user">
        <div *ngIf="user.name; else login">
          <i class="fa fa-user-circle mr-1"> </i>
          <a class="mr-1">{{ user.name }}</a>
          <a (click)="logout()">Logout</a>
        </div>
      </div>
    </nav>

    <ng-template #login>
      <span class="navbar-text">
        <a [routerLink]="['']">Login</a>
      </span>
    </ng-template>
  </header>
</ng-container>

Abaixo, um gif com o resultado:

Vale ressaltar que a solução apresentada acima é mais simples em termos de configuração, mas ela apenas oculta a navbar no nível da interface do usuário, não afetando a autenticação real ou a autorização do usuário. Se você precisar de uma solução mais robusta com recursos de autenticação e autorização, recomendo que utilize o conceito de guarda de rotas. Inclusive, temos um curso de Angular na Alura que contempla o cenário de guarda de rotas, te convido a conhecê-lo e colocar em prática este recurso na sua aplicação:

• Curso - Angular: controle o fluxo de navegação

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!