How To Use PrimeNg ConfirmPopup In Angular

Hello Friends, In this article We will learn how to add the confirm popup in an angular project using primeNG.

–First of all, create a new angular app. Now open your terminal and execute the following command on it to install the angular app.

ng new confirm-popup

–Then install the following package in your app

npm install primeng --save

The CSS dependencies are as follows the structural CSS of components.

–Now we need to add the CSS files of primeNG into the application at angular.json.

In the angular.json file find the style array and add the following:

"styles": [
    "node_modules/primeicons/primeicons.css",
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css"
]

Add the below code in App.Module.ts File

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfirmPopupModule } from 'primeng/confirmpopup'
import { ConfirmationService } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ConfirmPopupModule,
    ToastModule,
    ButtonModule,
    BrowserAnimationsModule
  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

–Now add the below HTML code in the App.Component.html file to add the confirm popup.

<p-confirmPopup></p-confirmPopup>
<button (click)="confirm($event)" pButton icon="pi pi-check" label="Confirm"></button>
<router-outlet></router-outlet>

–Add the below typescript code to the App.Component.ts file.

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private confirmationService: ConfirmationService) {}

  confirm(event: Event | any) {
      this.confirmationService.confirm({
          target: event.target ,
          message: 'Are you sure that you want to proceed?',
          icon: 'pi pi-exclamation-triangle',
          accept: () => {
            alert('confirmed')
          },
          reject: () => {
            alert('rejected')
          }
      });
  }
}

Output:-