TyroUiConfirmService

Confirm Modal

Confirmation modal with yes/no and close. Returns a Promise<boolean>. Trigger via TyroUiConfirmService.confirm(config). Place <tyro-ui-confirm-modal> once in the root layout.

Demo

Click a button and see the returned value

ITyroUiConfirmConfig

Property	Type	Default	Description
`title`	`string`	`-`	Modal title
`message`	`string`	`-`	Message body
`icon`	`string (Remix Icon)`	`-`	Icon - defaults by type
`type`	`'default' \| 'danger'`	`'default'`	Color of confirm button and icon
`confirmLabel`	`string`	`'Confirmer'`	Confirm button text
`cancelLabel`	`string`	`'Annuler'`	Cancel button text

Setup

Root layout - add once

<tyro-ui-dashboard-layout [...]>
  <router-outlet />
</tyro-ui-dashboard-layout>
<tyro-ui-confirm-modal></tyro-ui-confirm-modal>

Usage - async/await

private readonly confirm = inject(TyroUiConfirmService);

async deleteItem(): Promise<void> {
  const ok = await this.confirm.confirm({
    type:         'danger',
    icon:         'ri-delete-bin-line',
    title:        'Supprimer cet élément ?',
    message:      'Cette action est irréversible.',
    confirmLabel: 'Supprimer',
    cancelLabel:  'Annuler',
  });

  if (ok) {
    // l'utilisateur a confirmé
  }
}