MaterialConfirm

Confirm service and directive with material dialog

Installation

npm install @kovalenko/material-confirm

Directive

Selector: confirm

Properties

Name | Description --- | --- @Input() confirmTitle: string | Dialog title @Input() confirmMessage: string | Confirm message @Input() confirmOk: string | Ok button text @Input() confirmCancel: string | Cancel button text @Output() confirm: EventEmitter<any> | This will callback if Ok button clicked

Service

ConfirmService

Calls confirmation dialog programmatically

Methods

Usage

This library uses standalone components. Import ConfirmDirective directly in your component's imports array and provide the configuration using provideMaterialConfirm():

import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import {ConfirmDirective, provideMaterialConfirm, MaterialConfirmConfig} from '@kovalenko/material-confirm';
import {AppComponent} from './app';

const materialConfirmConfig: MaterialConfirmConfig = {
  ok: 'Ok',
  cancel: 'Cancel',
  position: {
    top: '10px'
  },
  width: '400px'
};

bootstrapApplication(AppComponent, {
  providers: [
    provideMaterialConfirm(materialConfirmConfig),
  ]
});

Confirmation via directive

import { Component } from '@angular/core';
import { ConfirmDirective } from '@kovalenko/material-confirm';

@Component({
  selector: 'app',
  imports: [ConfirmDirective],
  template: `
    <button confirm (confirm)="callback()" [confirmMessage]="message">Click</button>
  `,
})
export class AppComponent {
  message = 'Confirm action';
  
  callback() {
    console.log('confirmed');
  }
}

Confirmation via service

import {Component} from '@angular/core';
import {ConfirmService} from '@kovalenko/material-confirm';

@Component({
  selector: 'app',
  template: `
    <button (click)="action()">Click</button>
  `,
})
export class AppComponent {

  constructor(private confirmService: ConfirmService) { }
  
  async action() {
    if (await this.confirmService.confirm('Confirm action')) {
      console.log('confirmed');
    }
  }

}

License

MIT