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

`confirm: Promise<boolean \| any>`
Action confirm
Arguments
`confirmMessage: string`	Confirm message
`confirmTitle?: string`	Dialog title
`confirmOk?: string`	Ok button text
`confirmCancel?: string`	Cancel button text
`config?: MatDialogConfig`	Override dialog config
`actions?: {value: any, title: string}[]`	Additional action buttons

`setDefaults: void`
Set default values
Parameters
`title: string`	Dialog title
`ok: string`	Ok button text
`cancel: string`	Cancel button text

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

Keywords

angular material confirm