*ngFor doesn't display second component without detectChanges()

Question

I'm trying to display other component in my app with *ngFor. It doesn't render if I don't use detectChanges() in my method. Should it be like that?

 <button class="custom-button" (click)="showHide()">
     DISPLAY COMPONENT
 </button>
 <div *ngIf="visibleSecondComponent>
     <app-second-component></app-second-component>
 </div>

My method:

showHide() {
   this.visibleSecondComponent= !this.visibleSecondComponent;
   // this.changeDetectorRef.detectChanges();
   console.log('show ' + this.visibleSecondComponent);
}

When I comment out this.changeDetectorRef.detectChanges(); it doesn't render , but in the console I see it is working and it prints out the console.log.

What is the cause of that behavior? I have similar issue when I want to use | async. I'm using angular 13.2.0

I would appreciate some hints if it's a normal behavior or am I doing something wrong.