Fix broken toast animations & DOM removal

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>

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
+}