Popconfirm

Angular Bootstrap 5 Popconfirm component

Responsive popconfirm built with Bootstrap 5, Angular and Material Design. Popconfirm is a compact dialog alert. Use it to confirm/cancel a decision or display extra content like an explanation.

Popconfirm basically is a simple alert with confirmation buttons.

Note: Read the API tab to find all available options and advanced customization

Basic example

Basic example of popconfirm usage

You can create popconfirm dynamically from any component using a built-in service. To achieve this, follow these steps:

1. Create a new component with Angular CLI and add some HTML code to the template.

ng generate component popconfirm

<div class="popconfirm-popover shadow-4">
  <div class="popconfirm">
    <p class="popconfirm-message">
      <span class="popconfirm-message-text">This is example</span>
    </p>
    <div class="popconfirm-buttons-container">
      <button (click)="popconfirmRef.close()" type="button" aria-label="Cancel" class="btn btn-secondary btn-sm">
        Cancel
      </button>
      <button (click)="popconfirmRef.confirm()" type="button" aria-label="Confirm" class="btn btn-primary btn-sm">
        OK
      </button>
    </div>
  </div>
</div>
import { Component } from '@angular/core';
import { MdbPopconfirmRef } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-popconfirm',
  templateUrl: './popconfirm.component.html',
})
export class PopconfirmComponent {
  constructor(public popconfirmRef: MdbPopconfirmRef<PopconfirmComponent>) {}
}

2. Inject MdbPopconfirmService to the component from which you want to open the popconfirm and use the open method. 

<button class="btn btn-primary" (click)="openPopconfirm($event)">Open popconfirm</button>
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target)
  }
}

Inject and receive data

You can inject data to the modal by passing it to the data parameter in the popconfirm options. 

<button class="btn btn-primary" (click)="openPopconfirm($event)">Open popconfirm</button>
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component(
  { selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(
      PopconfirmComponent,
      target,
      { data: { text: 'Custom text' } }
    );
  }
}

Here is an example showing how to use injected data in the popconfirm component:

<div class="popconfirm-popover shadow-4">
  <div class="popconfirm">
    <p class="popconfirm-message">
      <span class="popconfirm-message-text">{{ text }}</span>
    </p>
    <div class="popconfirm-buttons-container">
      <button (click)="popconfirmRef.close()" type="button" aria-label="Cancel" class="btn btn-secondary btn-sm">
        Cancel
      </button>
      <button (click)="popconfirmRef.confirm()" type="button" aria-label="Confirm" class="btn btn-primary btn-sm">
        OK
      </button>
    </div>
  </div>
</div>
import { Component } from '@angular/core';
import { MdbPopconfirmRef } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-popconfirm',
  templateUrl: './popconfirm.component.html',
})
export class PopconfirmComponent {
  text: string | null = null;

  constructor(public popconfirmRef: MdbPopconfirmRef<PopconfirmComponent>) {}
}

Receive data from the popconfrim

You can receive data from the popconfirm to use it in other components:

<div class="popconfirm-popover shadow-4">
  <div class="popconfirm">
    <p class="popconfirm-message">
      <span class="popconfirm-message-text">This is example</span>
    </p>
    <div class="popconfirm-buttons-container">
      <button (click)="close()" type="button" aria-label="Cancel" class="btn btn-secondary btn-sm">
        Cancel
      </button>
      <button (click)="popconfirmRef.confirm()" type="button" aria-label="Confirm" class="btn btn-primary btn-sm">
        OK
      </button>
    </div>
  </div>
</div>
import { Component } from '@angular/core';
import { MdbPopconfirmRef } from 'mdb-angular-ui-kit/popconfirm';

@Component(
  { selector: 'app-popconfirm',
  templateUrl: './popconfirm.component.html',
})
export class PopconfirmComponent {
  constructor(public popconfirmRef: MdbPopconfirmRef<PopconfirmComponent>) {}

  close(): void {
    const closeMessage = 'Popconfirm closed';
    this.popconfirmRef.close(closeMessage)
  }
}

Here is an example showing how to use data received from popconfirmRef in other components

<button type="button" (click)="openPopconfirm($event)" class="btn btn-primary me-1">
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'create-dynamic-popconfirm',
  templateUrl: './create-dynamic-popconfirm.component.html',
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target);
    this.popconfirmRef.onClose.subscribe((message: any) => {
      console.log(message);
    });
  }
}

Display mode

You can choose between modal and inline to modify display mode.

Modal mode is rendered at the center of the screen and is static, you can't change its position but all other attributes can be applied 

<button
  type="button"
  (click)="openPopconfirm($event)"
  class="btn btn-primary popconfirm-toggle me-1"
>
  Modal
</button>
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target, { popconfirmMode: 'modal' });
  }
}

Icon example

You can add an icon to the message in the popconfirm by customizing the template

<button type="button" (click)="openPopconfirm($event, templateWithIcon)" class="btn btn-primary me-1">
  Icon
</button>

<ng-template #templateWithIcon>
  <div class="popconfirm-popover shadow-4">
    <div class="popconfirm">
      <p class="popconfirm-message">
        <span class="popconfirm-icon-container"><i class="fa fa-comment pe-1"></i></span>
        <span class="popconfirm-message-text">Icon example</span>
      </p>
      <div class="popconfirm-buttons-container">
        <button (click)="close()" type="button" aria-label="Cancel" class="btn btn-secondary btn-sm">
          Cancel
        </button>
        <button (click)="confirm()" type="button" aria-label="Confirm" class="btn btn-primary btn-sm">
          OK
        </button>
      </div>
    </div>
  </div>
</ng-template>
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event, templateRef: any) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(templateRef, target, { position: 'bottom' });
  }
}

Inline positions

You can choose between different positions

Available positions: top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top; 

<button
  type="button"
  (click)="openPopconfirm($event)"
  class="btn btn-primary popconfirm-toggle me-1"
>
  Left top
</button>
import { Component } from '@angular/core';
import { PopconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopconfirmRef, MdbPopconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target, { position: 'left-top' });
  }
}

Popconfirm - API

Import

import { MdbPopconfirmModule } from 'mdb-angular-ui-kit/popconfirm';
…
@NgModule ({
  ...
  imports: [MdbPopconfirmModule],
  ...
})

Options

Name Type Default Description
popconfirmMode String 'inline' Mode of display -> 'inline' or 'modal'
position String '' Specify position to display popover 
<button type="button" (click)="openPopoconfirm($event.target)" class="btn btn-primary me-1">
import { Component } from '@angular/core';
import { PopoconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopoconfirmRef, MdbPopoconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target, { popconfirmMode: 'modal' });
  }
}

Methods

MdbPopconfirmService

Method Description
open(componentType, target, config?: MdbPopconfirmConfig<D>) Open Popconfirm. 
<button class="btn btn-primary" (click)="openPopoconfirm($event.target)">Open popconfirm</button>
import { Component } from '@angular/core';
import { PopoconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopoconfirmRef, MdbPopoconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target);
  }
}

MdbPopconfirmRef

Method Description
onClose: Observable<any> Returns observable on popconfirm close.
onConfirm: Observable<any> Returns observable on popconfirm confirm. 
<button class="btn btn-primary" (click)="openModal()">Open modal</button>
import { Component } from '@angular/core';
import { PopoconfirmComponent } from 'your-path-to-popconfirm-component';
import { MdbPopoconfirmRef, MdbPopoconfirmService } from 'mdb-angular-ui-kit/popconfirm';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  popconfirmRef: MdbPopconfirmRef<PopconfirmComponent> | null = null;

  constructor(private popconfirmService: MdbPopconfirmService) {}

  openPopconfirm(event: Event) {
    const target = event.target as HTMLElement;
    this.popconfirmRef = this.popconfirmService.open(PopconfirmComponent, target);
    this.popconfirmRef.onClose.subscribe((message: any) => {
      console.log(message);
    });
  }
}

CSS variables

As part of MDB’s evolving CSS variables approach, popconfirm now use local CSS variables on .popconfirm for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Popconfirm's CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

// :root
--#{$prefix}popconfirm-zindex: #{$popconfirm-zindex};
--#{$prefix}popconfirm-border-radius: #{$popconfirm-border-radius};

// .popconfirm
--#{$prefix}popconfirm-padding: #{$popconfirm-padding};
--#{$prefix}popconfirm-background-color: #{$popconfirm-background-color};

// .popconfirm-popover
--#{$prefix}popconfirm-popover-width: #{$popconfirm-popover-width};
--#{$prefix}popconfirm-border: #{$popconfirm-border};

// .popconfirm-modal
--#{$prefix}popconfirm-modal-width: #{$popconfirm-modal-width};

// .popconfirm-buttons-container
--#{$prefix}popconfirm-buttons-container-btn-ml: #{$popconfirm-buttons-container-btn-ml};

// .popconfirm-backdrop
--#{$prefix}popconfirm-backdrop-zindex: #{$popconfirm-backdrop-zindex};
--#{$prefix}popconfirm-backdrop-background-color: #{$popconfirm-backdrop-background-color};

SCSS variables

$popconfirm-zindex: 1080;
$popconfirm-backdrop-zindex: 1070;

$popconfirm-padding: 1rem;
$popconfirm-background-color: $white;
$popconfirm-border-radius: 0.5rem;

$popconfirm-popover-width: 300px;
$popconfirm-popover-margin: 5px;
$popconfirm-modal-width: $popconfirm-popover-width;
$popconfirm-buttons-container-btn-ml: 0.5rem;
$popconfirm-backdrop-background-color: rgba(0, 0, 0, 0.4);
$popconfirm-border: 1px solid #f5f5f5;