ConfirmPopup | Neural UI v2

Uso

Conecta open y cierra al recibir accepted o rejected. Esta confirmación no es un filtro ni un tooltip. La aplicación decide qué significa aceptar; Core no ejecuta tu operación destructiva. Localiza title, message y las etiquetas de acción.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Eventos: 0

message

Opciones avanzadas · 3

<button neu-button (neuClick)="open.set(true)">
  {{ t("Request confirmation", "Solicitar confirmación") }}</button
><neu-confirm-popup
  [open]="open()"
  message="¿Continuar con esta acción?"
  (accepted)="open.set(false); record('accepted')"
  (rejected)="open.set(false); record('rejected')"
  [acceptLabel]="'Confirmar'"
  [rejectLabel]="'Cancelar'"
  [title]="'Confirmar acción'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const open = signal(false);

Estado y eventos

Conecta open y cierra al recibir accepted o rejected. Esta confirmación no es un filtro ni un tooltip. La aplicación decide qué significa aceptar; Core no ejecuta tu operación destructiva. Localiza title, message y las etiquetas de acción.

Accesibilidad y teclado

Tab recorre las acciones de confirmación. Escape rechaza la confirmación abierta.

Tecla	Acción
`Tab`	Recorre las acciones disponibles de la confirmación.
`Enter`	Activa el botón enfocado de aceptar o rechazar.
`Space`	Activa el botón enfocado de aceptar o rechazar.
`Escape`	Rechaza la confirmación abierta.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`acceptLabel`	`string`	`'Confirm'`	`[acceptLabel]`	Nombre visible de la acción para confirmar o cancelar.
`message`	`string`	`''`	`[message]`	Mensaje de confirmación que explica la acción que se acepta o cancela.
`open`	`boolean`	`false`	`[open]`	Visibilidad gestionada por la aplicación. Aplica false al aceptar una solicitud de cierre.
`rejectLabel`	`string`	`'Cancel'`	`[rejectLabel]`	Nombre visible de la acción para confirmar o cancelar.
`title`	`string`	`''`	`[title]`	Título visible opcional sobre el contenido proyectado.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`accepted`	`void`	`(accepted)="onAccepted($event)"`	Informa de la decisión. Cierra el estado open aplicado en el manejador.
`rejected`	`void`	`(rejected)="onRejected($event)"`	Informa de la decisión. Cierra el estado open aplicado en el manejador.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Configuración pública

Nombre	Contrato
`NeuConfirmPopupService`	`export declare class NeuConfirmPopupService { close(value: boolean): void; confirm(options: NeuConfirmPopupOptions): Promise<boolean>; readonly state: import("@angular/core").WritableSignal<NeuConfirmPopupOptions \| null>; }`

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuConfirmPopupOptionsTypeScript

import type { NeuConfirmPopupOptions } from '@neural-ui/core/confirm-popup';

// Declaración pública (solo referencia)
export interface NeuConfirmPopupOptions {
  acceptLabel?: string;
  message: string;
  rejectLabel?: string;
  title?: string;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-shadow-lg`	Elevación de la superficie o capa	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04)`
`--neu-z-overlay`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`400`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.