Popconfirm

Angular Bootstrap 5 Popconfirm component

Responsive popconfirm built with the latest Bootstrap 5, Angular 11 and Material Design 2.0. 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

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


Inject and receive data

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

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

Receive data from the popconfrim

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

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


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


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;

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: MdbPopoconfirmRef<PopoconfirmComponent>;

            constructor(private popconfirmService: MdbPopoconfirmService) {}

            openPopoconfirm(target) {
              this.popconfirmRef = this.popconfirmService.open(PopoconfirmComponent, 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: MdbPopoconfirmRef<PopoconfirmComponent>;

            constructor(private popconfirmService: MdbPopoconfirmService) {}
          
            openPopoconfirm(target) {
              this.popconfirmRef = this.popconfirmService.open(PopoconfirmComponent, 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: MdbPopoconfirmRef<PopoconfirmComponent>;

            constructor(private popconfirmService: MdbPopoconfirmService) {}
          
            openPopoconfirm(target) {
              this.popconfirmRef = this.popconfirmService.open(PopoconfirmComponent, target);
              this.popconfirmRef.onClose.subscribe((message: any) => {
                console.log(message);
              });
            }
          }