why *ngIf not working with ng-container in Angular

Question

I am trying to close bootstrap alert box on click close button with help of *ngIf.

In onClick (close) am calling isError=false. I am able to log isError value as false but ng-container is not disappering? Here is my code

<div class="error-list">
  <ng-container *ngIf="isError">
    <ngb-alert type="danger" (click)="closeError()">{{errorMessage}}</ngb-alert>
  </ng-container>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span
        aria-hidden="true">&times;</span></span>
    <strong>Warning!</strong> {{errorMessage}}.
  </div>

</div>

.error-list {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

::ng-deep .alert {
  margin-bottom: 0;
}

.ts file

 closeError(): void {

this.isError = false;
console.log("Message: ", this.isError);
}

Answer 1

I try to solve your problem and getting no issue. This is just a very simplified example:

https://stackblitz.com/edit/angular-r29kyu

As per my understanding you want to hide the div with class alert alert-warning alert-dismissible as well. If so than you have to put it inside ng-container as well.