angular html not updating

Question

I'm trying to update component.html according to a value that sent from the service.

In service.ts:

public loggedIn = new BehaviorSubject<boolean>(false);
generateDoc(): void {
    this.loggedIn.next(true);
    //function body here - it takes few seconds
    this.loggedIn.next(false);

component.ts:

import { ChangeDetectorRef } from '@angular/core'; 
async ngOnInit() {
    this.reportService.loggedIn.subscribe(response => {
    this.isDownload = response; 
    this.cd.markForCheck();
    console.log(`is download value changed! ${this.isDownload}`)}); }

component.html:

<div *ngIf="isDownload">
wait...</div>

The variable value is updated in the ts - I can see it in the console, but the HTML not updated no matter what I'm trying. with this.cd.detectChanges only the HTML changed when the value is true and do nothing when it false