diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html
index 9d4ae6bb6..b79208ebf 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.html
+++ b/src-ui/src/app/components/common/toasts/toasts.component.html
@@ -2,7 +2,7 @@
   *ngFor="let toast of toasts"
   [header]="toast.title" [autohide]="true" [delay]="toast.delay"
   [class]="toast.classname"
-  (hide)="toastService.closeToast(toast)">
+  (hidden)="toastService.closeToast(toast)">
   <p>{{toast.content}}</p>
   <p *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
 </ngb-toast>
diff --git a/src-ui/src/app/components/common/toasts/toasts.component.scss b/src-ui/src/app/components/common/toasts/toasts.component.scss
index 4d1c95fce..d2aaf20b0 100644
--- a/src-ui/src/app/components/common/toasts/toasts.component.scss
+++ b/src-ui/src/app/components/common/toasts/toasts.component.scss
@@ -5,3 +5,7 @@
   margin: 0.5em;
   z-index: 1200;
 }
+
+.toast:not(.show) {
+  display: block; // this corrects an ng-bootstrap bug that prevented animations
+}
\ No newline at end of file