[Angular] Cambiare template o nascondere componente in pagina Login

[fermat]

ciao!

risolto un problema se ne crea un altro (come al solito insomma).

in pratica questo è app.component.html:

<p-toast position="center" key="c" [modal]="true" [baseZIndex]="5000">
  <ng-template let-message pTemplate="message">
    <div style="text-align: center">
      <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
      <h3>{{message.summary}}</h3>
      <p>{{message.detail}}</p>
    </div>
    <div class="ui-g ui-fluid">
      <div class="ui-g-12">
        <button type="button" pButton (click)="onConfirm()" label="Ok" class="ui-button-success"></button>
      </div>
    </div>
  </ng-template>
</p-toast>

<div class="layout-wrapper" (click)="onLayoutClick()" [ngClass]="{'layout-static': isStatic(),
                'layout-overlay': isOverlay(),
                'layout-overlay-active': overlayMenuActive,
                'layout-horizontal': isHorizontal(),
                'layout-slim': isSlim(),
                'layout-static-inactive': staticMenuDesktopInactive,
                'layout-mobile-active': staticMenuMobileActive,
                'layout-menu-dark':darkMenu,
                'layout-menu-light':!darkMenu}">

  <app-topbar></app-topbar>

  <div class="layout-menu-container" (click)="onMenuClick($event)">
    <div class="layout-menu-logo">
      <a href="#">
        <img id="layout-menu-logo" src="assets/layout/images/logo.png" library="babylon-layout" />
      </a>
    </div>
    <div class="layout-menu-wrapper">
      <p-scrollPanel #layoutMenuScroller [style]="{height: '100%' }">
        <div class="menu-scroll-content">
          <app-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></app-inline-profile>
          <app-menu></app-menu>
        </div>
      </p-scrollPanel>
    </div>
  </div>

  <div class="layout-main">
    <app-breadcrumb></app-breadcrumb>

    <div class="layout-content">
      <h1>CIAO</h1>
      <router-outlet></router-outlet>
    </div>
  </div>

  <!-- <app-footer></app-footer> -->
  <div class="layout-mask"></div>

</div>

nell' app.component.ts faccio questo controllo:

  ngOnInit() {
    this.titleService.setTitle('Justy');
    this.user = this.session.get('USER');
    if (!this.user) {
      this.router.navigate(['/login']);
    }

    this.titleService.setTitle('Home');
  }

che in pratica richiama il componente di login che il classico form per le credenziali.
il problema è che il form si vede all'interno di tutto il resto che si vede nella home.
quindi menu, topbar, ecc.
ed ovviamente non dovrei far vedere questi componenti in fase di login.
in questo caso specifico cosa dovrei fare secondo voi??

[rikyeko]

forse dovresti impostare un routing preciso per il login, che richiama il componente/modulo del login che è indipendente da quello della home, in modo da 'uscire' dalla home

poi nell'app.component invece codice della home dovresti mettere solo il tag <router-outlet> che renderizza i componenti/moduli in base, appunto, al routing

dai un'occhiata qui
https://angular.io/guide/router