Show template according to user status

I am developing a system but I am having difficulties in the authentication part, or rather not in the authentication part, but in the part of showing or not certain content according to the status of the user (logged in or not).

The problem is when the user logs in, when I update the page first it shows the login screen to only then show the home of the site, and something relatively fast, shows the login and then the home, what I want and try to synchronize this, so to speak, I want to test the status of the user and depending on the result show the home or the login.

app.component.html

<div class="wrapper" *ngIf="isLoggedIn">
<cma-header></cma-header>
<cma-sidebar></cma-sidebar>
<router-outlet></router-outlet>
</div>

<div class="wrapper" *ngIf="!isLoggedIn">
<cma-login></cma-login>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import { AuthService } from './autenticacao/autenticacao.service';
import { Router } from '@angular/router';


@Component({
selector: 'cma-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

public user$ = this.authService.user;
public isLoggedIn;

constructor (private authService: AuthService, private router: Router) {
authService.isAuthenticated().subscribe(
success => this.isLoggedIn = success,
  error => console.log(this.isLoggedIn)
);
}

ngOnInit() {
}

}