팝업 알림

src/app/modules/admin/board/popup/components/list.component.html

@@ -112,7 +112,12 @@
                     >
                       수정
                     </button>
-                    <button class="flex-auto" type="button" mat-stroked-button>
+                    <button
+                      class="flex-auto"
+                      type="button"
+                      mat-stroked-button
+                      (click)="__onClickRemoveBtn($event, info.id)"
+                    >
                       삭제
                     </button>
                   </div>

src/app/modules/admin/board/popup/components/list.component.ts

@@ -89,6 +89,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   popupDataSource: MatTableDataSource<Popup> = new MatTableDataSource();
 
+  configForm!: FormGroup;
   /**
    * Constructor
    */
@@ -119,6 +120,29 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
+
+    this.configForm = this._formBuilder.group({
+      title: '알림',
+      message:
+        '정말로 삭제하시겠습니까? <span class="font-medium">삭제!</span>',
+      icon: this._formBuilder.group({
+        show: true,
+        name: 'heroicons_outline:exclamation',
+        color: 'warn',
+      }),
+      actions: this._formBuilder.group({
+        confirm: this._formBuilder.group({
+          show: true,
+          label: '삭제',
+          color: 'warn',
+        }),
+        cancel: this._formBuilder.group({
+          show: true,
+          label: '취소',
+        }),
+      }),
+      dismissible: true,
+    });
   }
 
   /**
@@ -195,6 +219,16 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     let url: string = 'board/popup/redit/' + id;
     this.router.navigateByUrl(url);
   }
+
+  __onClickRemoveBtn(event: MouseEvent, id: string): void {
+    // Open the dialog and save the reference of it
+    const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
+
+    // Subscribe to afterClosed from the dialog reference
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(result);
+    });
+  }
   /**
    * Create product
    */