I am struggling to close a bootstrap alert box by clicking on the close button using *ngIf.
When I click on (close), I set isError to false. Even though I can see isError being logged as false, the ng-container is not disappearing. 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">×</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);
}