@kovalenko/material-confirm

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

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

First, import the MaterialConfirmModule to your module:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {MaterialConfirmModule, MaterialConfirmConfig} from '@kovalenko/material-confirm';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app';

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

@NgModule({
  imports: [
    BrowserModule,
    MaterialConfirmModule.config(materialConfirmConfig)
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

Confirmation via directive

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <button (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