how to make isLogin true after login is done?

Question

I am not being able to get isLogin value boolean value from login.component.ts after the login is completed.

I already tried @output EventEmitter. The problem with EventEmitter is that, it is called in selector of parent component. But in app.component.ts has not any child selector. you can see it in app.component.html

login.component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog';
import { LoginService } from './login.service';
import { SnackbarService } from 'src/app/shared/snackbar.service';
import { MatDialog } from '@angular/material/dialog';
import { CommonHttpService } from 'src/app/business-cockpit/services/common-http.service';
import { BusinessDialogComponent } from 'src/app/business-cockpit/business-dialog/business-dialog.component';
import { BranchDialogComponent } from 'src/app/business-cockpit/branch-dialog/branch-dialog.component';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {


  @Output() isLogin = new EventEmitter<boolean>();
  
  hide = true;
  username: string = "";
  password: string = "";


  constructor(private  CommonHttpService:CommonHttpService,
    public dialogRef: MatDialogRef<LoginComponent>,
    private router: Router, private snackBarService: SnackbarService, public dialog: MatDialog) { }

  ngOnInit(): void {

  }

  login() {
    const payload = {
      username: this.username,
      password: this.password
    }
    // this.loginService.login(payload).subscribe((response: any) => {
    //   this.dialogRef.close();
    //   this.router.navigateByUrl("/business-home");
    // }
    // )

    this.CommonHttpService
    .create('/public/login', payload)
    .subscribe((response: any) => {

      if ( response.user.businessId == null) {

        this.dialog.open(BusinessDialogComponent,{ disableClose: true });  
   
      }
      this.dialogRef.close();
      this.router.navigateByUrl('/business-home');

      this.isLogin.emit(true)
    });

    console.log(this.isLogin)
  
  }



}

app.component.html

<div class="before-Login" *ngIf="!isLogin">
    <app-public-navbar></app-public-navbar>

    <router-outlet></router-outlet>
    <h1>Header sample H1</h1>
    <p>this is a test text</p>
</div>


<div class="afterLogin" *ngIf="isLogin">

    <app-business-cockpit></app-business-cockpit>

</div>

I want to get isLogin value true after the user get login. If isLogin is true then Ngif render business-cockpit

app.component.ts

import { Component } from '@angular/core';
import { LoginComponent } from './public/login/login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {


  isLogin = false
  title = 'business-manager-ui';
}