//html
<app-card-table-wrap [btnTpl]="tableBtns"
                       [tableTitle]="'Functions'"
                       (reload)="reloadTable()">
    <app-ant-table [checkedCashArrayFromComment]="checkedCashArray"
                   [tableConfig]="tableConfig"
                   [tableData]="dataList"
                   (changePageNum)="getDataList($event)"
                   (changePageSize)="changePageSize($event)"
                   (selectedChange)="selectedChecked($event)"
                   (sortFn)="changeSort($event)"></app-ant-table>
    <ng-template #operationTpl
                 let-id="id">
       <!--Added the way to write permissions-->
       <!-- <span *appAuth="ActionCode.FireSysSettingDel" class="operate-text" (click)="del(id)">Delete</span>-->
       <span class="operate-text"
             (click)="del(id)"><span nz-icon
                  nzType="delete"
                  nzTheme="outline"></span></span>
       <span class="operate-text"
             (click)="openModal(id)"><span nz-icon
                  nzType="edit"
                  nzTheme="outline"></span></span>
    </ng-template>
  </app-card-table-wrap>


// ts 
openModal(id?: string): void {
    const isEditMode = !!id;
    const modal = this.modalSrv.create({
      nzTitle: isEditMode ? 'Function Edit' : 'Function Add',
      nzContent: FormComponent,
      nzMaskClosable: false,
      nzData: id
    });

    // Xử lý sự kiện afterClose để nhận dữ liệu từ modal khi nó đóng
    modal.afterClose.subscribe(result => {
      if (result || result?.succeeded) {
        this.getDataList();
      }
    });
  }