diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
index 564c570904..6c4d232b99 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
@@ -38,12 +38,11 @@ export class ConfirmationComponent {
   ) {
     this.confirmationService.confirmation$.subscribe(confirmation => {
       this.data = confirmation;
-      this.visible = true;
+      this.visible = !!confirmation;
     });
   }
 
   close(status: Toaster.Status) {
     this.confirmationService.clear(status);
-    this.visible = false;
   }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index 99fbb88033..6cda67167b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Toaster } from '../../models';
 import { ToasterService } from '../../services/toaster.service';
 import { LocalizationService } from '@abp/ng.core';
+import snq from 'snq';
 
 @Component({
   selector: 'abp-toast',
@@ -38,8 +39,8 @@ export class ToastComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    if (this.toast.options && this.toast.options.sticky) return;
-    const timeout = this.toast.options.life || 5000;
+    if (snq(() => this.toast.options.sticky)) return;
+    const timeout = snq(() => this.toast.options.life) || 5000;
     setTimeout(() => {
       this.close();
     }, timeout);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
index d90980c1bf..650019392b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/confirmation.service.ts
@@ -60,6 +60,7 @@ export class ConfirmationService {
   }
 
   clear(status?: Toaster.Status) {
+    this.confirmation$.next();
     this.status$.next(status || Toaster.Status.dismiss);
   }
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
index 26d68a5e38..021aa60273 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Toaster } from '../models';
 import { ReplaySubject } from 'rxjs';
 import { Config } from '@abp/ng.core';
+import snq from 'snq';
 
 @Injectable({
   providedIn: 'root',
@@ -81,7 +82,7 @@ export class ToasterService {
     message: Config.LocalizationParam,
     title: Config.LocalizationParam = null,
     severity: Toaster.Severity = 'neutral',
-    options: Partial<Toaster.ToastOptions> = null,
+    options = {} as Partial<Toaster.ToastOptions>,
   ) {
     const id = ++this.lastId;
     this.toasts.push({
@@ -99,7 +100,7 @@ export class ToasterService {
    * @param id ID of the toast to be removed.
    */
   remove(id: number) {
-    this.toasts = this.toasts.filter(toast => toast.options.id !== id);
+    this.toasts = this.toasts.filter(toast => snq(() => toast.options.id) !== id);
     this.toasts$.next(this.toasts);
   }
 
@@ -107,7 +108,9 @@ export class ToasterService {
    * Removes all open toasts at once.
    */
   clear(key?: string) {
-    this.toasts = !key ? [] : this.toasts.filter(toast => toast.options.containerKey !== key);
+    this.toasts = !key
+      ? []
+      : this.toasts.filter(toast => snq(() => toast.options.containerKey) !== key);
     this.toasts$.next(this.toasts);
   }
 }