Por que o rodapé some quando executamos o logout?

Bom dia.

Faz sentido o rodapé com o botão de adicionar fotos ser exibido para um usuário deslogado? Não faz, inclusive se você já usou o instagram em sua versão Web verá que este é o mesmo comportamento, além disse o rodapé do instagram possui outras opções exclusivas de usuários logados. Foi uma escolha de design minha.

Sucesso e bom estudo.

Eu entendi a escolha do design e acho que ficou ótimo. O que eu não entendi, perfeitamente ainda, é como habilitar um componente para aparecer ou não. Por isso citei o rodapé como exemplo, quando logamos ele aparece, mas se sairmos do sistema ele desaparece.

No primeiro curso, de fundamentos, você aprendeu sobre a diretiva *ngIf, certo? Então, é através dessa diretiva que o rodapé é exibido ou não:

<footer class="mt-5" *ngIf="(user$ | async) as user">

No caso, se user$ for null (quando o usuário não esta logado), o rodapé não será exibido. Mas, se o usuário estiver logado, ele será exibido. Essa era sua dúvida?

Era essa mesma a dúvida, obrigado!

Mas agora eu tenho um novo problema, eu adicionei uma sidebar no projeto, e quando faço login os components home e login aparecem abaixo do component foto-list

Eu tentei remover o router-outlet do component app, mas aí na os components home e login não aparecem no index. E se eu removo o router-outlet da minha sidebar o foto-list fica embaixo da minha sidebar

Tenho certeza que isso é um problema de rota, mas como posso resolver?

Pelo o que eu entendi, o projeto que você esta trabalhando não é o do curso ou se for do curso foi modificado certo? Nesse sentido, dentro do que você me falou, é simplesmente um caso de CSS alinhando da maneira que você acha a ideal. Não tem muita relação com o Angular pelo o que eu entendi.

Sucesso e bom estudo.

É uma alteração no projeto Alurapic, ao invés de usar um footer, eu tentei implementar uma sidebar.

Imagens dos erros https://imgur.com/a/lKKUUgf

Seguem meus códigos abaixo, espero que ajudem você a entender minha dúvida

side-bar.component.html

<div class="row" *ngIf="(user$ | async) as user">
  <div class="col-md-2  bg-light" showMenu>
      <ul class="nav flex-column">
          <li class="nav-item">
              <a class="nav-link text-info" [routerLink]="['']"><i class="fa fa-home"></i> Home</a>
          </li>
          <li class="nav-item">
              <a class="nav-link text-info" [routerLink]="['/iniciarTransmissao']"><i class="fa fa-rss" aria-hidden="true"></i> Start streaming</a>
          </li>
          <li class="nav-item">
              <a class="nav-link text-info" [routerLink]="['/upload']"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
          </li>
      </ul>
  </div>

  <div class="col-md-10">
      <router-outlet></router-outlet>
  </div>
</div>

app.component.html

<ap-header></ap-header>
<ap-side-bar></ap-side-bar>
<router-outlet></router-outlet>