Como usar html global no angular? | Angular 19: estruture componentes com signals e controle de fluxo

Oi pessoal, estou criando um projeto no angular e gostaria de usar uma sidenav bar em meus componentes, exceto alguns que seria a pagina de login e a pagina inicial, meu codigo ate o momento esta assim, porem quando eu vou entrar na pagina que escondi no TS a pagina fica toda em branco. Alguem sabe dizer onde errei?

export class AppComponent implements OnInit {
  title = 'dash-control';
  
  showSidebar = true; 
  private excludedRoutes: string[] = ['/login', '/landing-page', '/plano-upgrade',  '/plano-concluido']; 
  
  constructor(private router: Router) {}
 
  ngOnInit() {
    this.router.events
      .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
      .subscribe(e => {
        const url = e.urlAfterRedirects;
        // usa startsWith p/ match exato de prefixo
        const isExcluded = this.excludedRoutes.some(route => url === route || url.startsWith(route + '/'));
        this.showSidebar = !isExcluded;
        console.log({ url, isExcluded, showSidebar: this.showSidebar });
      });
  }

html no app component
<div [hidden]="!showSidebar" class="app-layout">

Olá, Quezia! Seja muito bem-vinda ao fórum!

Antes de tudo, parabéns pelo seu código. Ele está muito bem escrito, limpo e usa as melhores práticas do Angular para resolver esse problema (como o uso de router.events, o pipe do RxJS e a lógica de verificação de rotas com some e startsWith). Você está no caminho certíssimo!

O problema que você está enfrentando é um daqueles detalhes que às vezes levamos horas para encontrar, mas a solução é super simples. A sua lógica de verificação está perfeita, mas a atribuição final do valor está invertida.

Vamos analisar a linha principal:

// O que seu código faz:
const isExcluded = this.excludedRoutes.some(/* ... */); // 'isExcluded' é TRUE se a rota deve ser escondida.
this.showSidebar = isExcluded;                         // Você está definindo showSidebar como TRUE se a rota for de exclusão.

Isso significa: "Mostre a sidebar (showSidebar = true) se a rota estiver na lista de exclusão (isExcluded = true)".

O que você quer é o exato oposto! Você quer mostrar a sidebar se a rota NÃO estiver na lista de exclusão.

A Correção

A correção é apenas adicionar um ponto de exclamação ! na frente da variável isExcluded para negar/inverter o valor booleano. O ! em programação significa NÃO.

Linha a ser corrigida: this.showSidebar = isExcluded;
Correção: this.showSidebar = !isExcluded;

Isso agora significa: "A sidebar deve ser mostrada (showSidebar) se a rota NÃO (!) for uma rota de exclusão (isExcluded)".

O Porquê da "Página em Branco"

Sua observação sobre a página ficar em branco também faz todo o sentido com essa lógica invertida. Provavelmente, no seu arquivo app.component.html, o <router-outlet> (onde o conteúdo das suas páginas é renderizado) está dentro de uma condição *ngIf="showSidebar".

Com a lógica invertida, nas páginas normais (onde a sidebar deveria aparecer), showSidebar estava recebendo false, e o Angular acabava escondendo não só a sidebar, mas o conteúdo da página inteira também!

Código Corrigido

Aqui está o seu ngOnInit completo com a pequena correção:

ngOnInit() {
  this.router.events
    .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
    .subscribe((e: NavigationEnd) => {
      const url = e.urlAfterRedirects;
      
      const isExcluded = this.excludedRoutes.some(route => url === route || url.startsWith(route + '/'));
      
      // --- A CORREÇÃO ESTÁ AQUI ---
      this.showSidebar = !isExcluded; 
      
      console.log({ url, isExcluded, showSidebar: this.showSidebar });
    });
}

Resumindo: seu código e sua lógica estão 99% perfeitos! A única coisa a fazer é inverter a lógica na atribuição final.

Parabéns novamente pelo excelente código e por fazer a pergunta certa! Isso mostra que você está evoluindo muito.

Caso essa resposta tenha solucionado sua dúvida, marque a resposta como solução!! ✅

Garanta sua matrícula hoje e ganhe + 2 meses grátis