title: Angular 7 component redirection without routing
body: <p>With my current Angular 7 and Firebase setup I have the following situation:</p>
  
  <p>I have the main app component which shows the member area if the user is logged in or otherwise the public area. Everything is working fine, but there is a 1-2 second delay until the correct component shows after signing out or in. I don't want to use routing btw. because I want to show everything with the same URL.</p>
  
  <p>Do you have an idea how I can reduce the delay and is this a good practice of doing authentication anyway?
  I appreciate all your help!</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div *ngIf="authService.isAuthorized(); else showLogin"&gt;
    &lt;app-member&gt;&lt;/app-member&gt;
  &lt;/div&gt;
  &lt;ng-template #showLogin&gt;
    &lt;app-public&gt;&lt;/app-public&gt;
  &lt;/ng-template&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And then here the components for the member area and public area:</p>
  
  <p>member.component.html:</p>
  
  <pre><code>&lt;button nz-button [nzSize]="size" nzType="primary (click)="authService.logout()"&gt;Logout&lt;/button&gt;
  </code></pre>
  
  <p>public.component.html:</p>
  
  <pre><code>&lt;button nz-button [nzSize]="size" nzType="primary" (click)="authService.login()"&gt;Login&lt;/button&gt;
  </code></pre>