diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index 8b0d8591c4..8987cda2f9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,8 +1,8 @@
-<div class="confirmation" *ngIf="visible">
+<div class="confirmation" *ngIf="confirmation$ | async as data">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
     <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
-      <i class="fa icon" [ngClass]="iconClass"></i>
+      <i class="fa icon" [ngClass]="getIconClass(data)"></i>
     </div>
     <div class="content">
       <h1
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 a68789044c..13462612e6 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
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { Confirmation } from '../../models/confirmation';
 
@@ -7,21 +7,21 @@ import { Confirmation } from '../../models/confirmation';
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],
 })
-export class ConfirmationComponent implements OnInit {
+export class ConfirmationComponent {
   confirm = Confirmation.Status.confirm;
   reject = Confirmation.Status.reject;
   dismiss = Confirmation.Status.dismiss;
 
-  visible = false;
-
-  data: Confirmation.DialogData;
-
   confirmation$: ReplaySubject<Confirmation.DialogData>;
 
   clear: (status: Confirmation.Status) => void;
 
-  get iconClass(): string {
-    switch (this.data.severity) {
+  close(status: Confirmation.Status) {
+    this.clear(status);
+  }
+
+  getIconClass({ severity }: Confirmation.DialogData): string {
+    switch (severity) {
       case 'info':
         return 'fa-info-circle';
       case 'success':
@@ -34,15 +34,4 @@ export class ConfirmationComponent implements OnInit {
         return 'fa-question-circle';
     }
   }
-
-  ngOnInit() {
-    this.confirmation$.subscribe(confirmation => {
-      this.data = confirmation;
-      this.visible = !!confirmation;
-    });
-  }
-
-  close(status: Confirmation.Status) {
-    this.clear(status);
-  }
 }