ngx-confirm

A mat-dialog to get cofirmations. Use it with a button.

Demo

Installation

npm i @ildug/ngx-confirm

Usage

import the diretive into your component:

...
import { NgxConfirmDirective } from '@ildug/ngx-confirm';
...

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    standalone:true,
    imports:[ ...,  NgxConfirmDirective]
})
export class AppComponent {

    ....

    doSomething() {
        ....
    }

}

Add the directive into a button. Bind the confrim event to the method to trigger.

<button ngxConfirm (confirm)="doSomething()">delete</button>

/* or pass a custom message*/
<button ngxConfirm="my message: Are your sure?" (confirm)="doSomething()">delete</button>

Style

Be sure to,import Angular Material Theme, in order to get a nice behaviour.

@import "@angular/material/prebuilt-themes/azure-blue.css";

To style buttons , you have to define some class:

// with aphrodite-sass
.btn{...}
.btn-main{...}

// or alternatively
.ngx-confirm-btn{...}
.ngx-confirm-btn-main{...}
.ngx-confirm-btn-cancel{...}