# @kovalenko/material-confirm

> Confirm service and directive with material dialog

Latest version **2.0.0** (published 2026-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kovalenko/material-confirm
pnpm add @kovalenko/material-confirm
yarn add @kovalenko/material-confirm
bun add @kovalenko/material-confirm
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-05-12 |
| First published | 2021-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kovalenko |
| Maintainers | kovalenko |
| Keywords | angular, material, confirm |

## Links

- npm: https://www.npmjs.com/package/@kovalenko/material-confirm
- Repository: https://github.com/menelai/scroll-here
- Homepage: https://github.com/menelai/scroll-here#readme
- Issues: https://github.com/menelai/scroll-here/issues
- npm.io page: https://npm.io/package/@kovalenko/material-confirm

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@kovalenko/mat-dialog-drag-bounds](https://npm.io/package/@kovalenko/mat-dialog-drag-bounds.md) ^1.0.0

## Recent versions

- 2.0.0 (latest) — 2026-05-12
- 1.1.3 — 2024-03-30
- 1.1.1 — 2022-06-27
- 1.0.1 — 2022-03-01
- 1.0.0 — 2021-12-24
- 0.2.1 — 2021-10-10
- 0.2.0 — 2021-05-18
- 0.1.1 — 2021-04-30
- 0.0.3 — 2021-04-30
- 0.0.2 — 2021-04-30

## README

# 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

<table>
  <tr>
    <th colspan="2"><code>confirm: Promise&lt;boolean | any&gt;</code></th>
  </tr>
  <tr>
    <td colspan="2">Action confirm</td>
  </tr>
  <tr>
    <th colspan="2">Arguments</th>
  </tr>
  <tr>
    <td><code>confirmMessage: string</code></td>
    <td>Confirm message</td>
  </tr>
  <tr>
    <td><code>confirmTitle?: string</code></td>
    <td>Dialog title</td>
  </tr>
  <tr>
    <td><code>confirmOk?: string</code></td>
    <td>Ok button text</td>
  </tr>
  <tr>
    <td><code>confirmCancel?: string</code></td>
    <td>Cancel button text</td>
  </tr>
  <tr>
    <td><code>config?: MatDialogConfig</code></td>
    <td>Override dialog config</td>
  </tr>
<tr>
    <td><code>actions?: {value: any, title: string}[]</code></td>
    <td>Additional action buttons</td>
  </tr>
</table>

<table>
  <tr>
    <th colspan="2"><code>setDefaults: void</code></th>
  </tr>
  <tr>
    <td colspan="2">Set default values</td>
  </tr>
  <tr>
    <th colspan="2">Parameters</th>
  </tr>
  <tr>
    <td><code>title: string</code></td>
    <td>Dialog title</td>
  </tr>
  <tr>
    <td><code>ok: string</code></td>
    <td>Ok button text</td>
  </tr>
  <tr>
    <td><code>cancel: string</code></td>
    <td>Cancel button text</td>
  </tr>
</table>

## Usage

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

```typescript
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

```typescript
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

```typescript
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

---
_Source: https://npm.io/package/@kovalenko/material-confirm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._