I am creating a basic crud application.I want to display a dialog box when the user clicks on the delete icon to confirm if he wants to delete the record or not.I am trying to use primeng dialog box but the dialog box is not opening up.There are no errors in console too.I don't know what is going wrong.Please Help.Thanks in advance.

Here is my ts code

export class ListuserComponent implements OnInit {

  constructor(private userService:UsersService,private dialogService:DialogService,private snackBar:MatSnackBar,private confirmationService:ConfirmationService) { }
  users: User[];
  msgs: Message[] = [];


  ngOnInit() {
    this.userService.getusers()
      .subscribe( data => {
        this.users = data;
      });
  }

  confirm1()
   {

    this.confirmationService.confirm({
        message: 'Are you sure that you want to proceed?',
        header: 'Confirmation',
        icon: 'pi pi-exclamation-triangle',
        accept: () => {
            this.msgs = [{severity:'info', summary:'Confirmed', detail:'You have accepted'}];
        },
        reject: () => {
            this.msgs = [{severity:'info', summary:'Rejected', detail:'You have rejected'}];
        }
    });
  }
}

Here is my html:

<div class="col-md-6">
   <p-table  #dt [value]="users" [autoLayout]="true" [globalFilterFields]="['userName','userRole']">
      <ng-template pTemplate="caption">
          <div style="text-align: right">        
              <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
              <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" class="filter">
          </div>
      </ng-template>
    <ng-template pTemplate="header">
        <tr>

              <th>Id</th>
              <th>Name</th>
              <th>Class</th>
              <th></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-user>

        <tr class="my-center-text">
            <td>{{user.id}}</td>

          <td>{{user.Name}}</td>
          <td>{{user.Class}}</td>
          <td><button mat-icon-button type="button"  matTooltip="Delete this student" matTooltipClass="example"
            (click)="confirm1()"> <mat-icon>delete_outline</mat-icon></button>
        </tr>
    </ng-template>
</p-table>
</div>

2 Answers

0
Community On

Solved it. Had to add p-confirmDialog tag to the the table cell.

0
Arul Prakash On

Add the following code to your HTML file.

<p-confirmDialog header="Confirmation" icon="fa fa-exclamation-triangle" width="425"></p-confirmDialog>