diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
new file mode 100644
index 0000000..ce53863
--- /dev/null
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts
@@ -0,0 +1,55 @@
+import { Directive, Input, TemplateRef, HostListener } from '@angular/core';
+import { ConfirmModalService } from './confirm-modal.service';
+import { IDataSource } from '@poweredsoft/data';
+
+@Directive({
+  selector: '[psbxConfirmModal]'
+})
+export class ConfirmModalDirective {
+
+  constructor(private confirmModalService: ConfirmModalService) { }
+
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() command: string;
+  @Input() model: any;
+  @Input() template: TemplateRef<any>;
+  @Input() commandTitle: string;
+  @Input() refreshOnSuccess: boolean;
+  @Input() commandText: string;
+  @Input() cancelText: string;
+  @Input() animated: boolean;
+  
+
+  @HostListener('click')
+  wasClicked() {            
+    this.dataSource.resolveCommandModelByName({
+      command: this.command,
+      model: this.model
+    }).subscribe(commandModel => { 
+      this.confirmModalService.confirm({
+        message: 'Do you want to delete this merchant?',
+        yesText: 'yes delete this merchant',
+        yesClass: 'danger',
+        noText: 'no please dont',
+        noClass: 'light'
+      }).subscribe(result => {
+        if(result){
+          this.dataSource.executeCommandByName(this.command, commandModel).subscribe(      
+            res => {
+              this.dataSource.refresh();
+            },
+            err => {
+              console.log(err);
+              alert('failed');
+            }
+          );
+        }
+      })
+
+    }, error => {
+
+    });
+  }
+
+}
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
index 8ba865b..fcfda3a 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts
@@ -3,16 +3,18 @@ import { CommonModule } from '@angular/common';
 import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ConfirmModalService } from './confirm-modal.service';
+import { ConfirmModalDirective } from './confirm-modal.directive';
 
 
 
 @NgModule({
-  declarations: [ConfirmModalComponent],
+  declarations: [ConfirmModalComponent, ConfirmModalDirective],
   imports: [
     CommonModule,
     ModalModule.forRoot(),
     
   ],
+  exports:[ConfirmModalDirective],
   providers: [ConfirmModalService]
 })
 export class ConfirmModalModule { }
diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
index 50ecadb..3be61ff 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts
@@ -10,5 +10,6 @@ export * from './lib/pagination/psbxPagination.module';
 export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
 export * from './lib/confirm-modal/confirm-modal.module';
 export * from './lib/confirm-modal/confirm-modal.service';
+export * from './lib/confirm-modal/confirm-modal.directive';
 export * from './lib/spinner/spinner.module';
 export * from './lib/spinner/spinner/spinner.component';
\ No newline at end of file
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
index 1521d9d..21597ea 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html
@@ -42,9 +42,9 @@
     <ng-container psDataGridCol="commands">
         <ng-container *psDataGridColHeader>Actions</ng-container>
         <ng-container *psDataGridCell="let model">
-            <!-- <button class="btn-warning btn" psbxCommandModal [commandTitle]="'Change ' + model.name + ' name'" commandText="Update"
-            [dataSource]="merchantDataSource" command="changeMerchant" [model]="model" [template]="changeName">Change</button> -->
-            <button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button>
+            <button class="btn-danger btn" psbxConfirmModal [commandTitle]="'Are you sure you wnat to remove ' + model.name + '?'" commandText="Remove"
+            [dataSource]="merchantDataSource" command="removeMerchant" [model]="model" >Remove</button>
+            <!-- <button class="btn-danger btn" (click)="removeMerchant(model.id)">Remove</button> -->
         </ng-container>
     </ng-container>
 
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
index 11cacd6..a44ac89 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
@@ -20,29 +20,29 @@ export class PaginationDemoComponent implements OnInit {
 
   pages:any;
 
-  removeMerchant(id:string) {
-    this.confirmModalService.confirm({
-      message: 'Do you want to delete this merchant?',
-      yesText: 'yes delete this merchant',
-      yesClass: 'danger',
-      noText: 'no please dont',
-      noClass: 'light'
-    }).subscribe(result => {
-      if(result){
-        this.merchantDataSource.executeCommandByName('removeMerchant', {
-          id: id
-        }).subscribe(      
-          res => {
-            this.merchantDataSource.refresh();
-          },
-          err => {
-            console.log(err);
-            alert('failed');
-          }
-        );
-      }
-    })
-  }
+  // removeMerchant(id:string) {
+  //   this.confirmModalService.confirm({
+  //     message: 'Do you want to delete this merchant?',
+  //     yesText: 'yes delete this merchant',
+  //     yesClass: 'danger',
+  //     noText: 'no please dont',
+  //     noClass: 'light'
+  //   }).subscribe(result => {
+  //     if(result){
+  //       this.merchantDataSource.executeCommandByName('removeMerchant', {
+  //         id: id
+  //       }).subscribe(      
+  //         res => {
+  //           this.merchantDataSource.refresh();
+  //         },
+  //         err => {
+  //           console.log(err);
+  //           alert('failed');
+  //         }
+  //       );
+  //     }
+  //   })
+  // }
 
   
   createDataSource(): IDataSource<IMerchant> {