Confirm Dialog | Neural Native

Importación

component.ts

import { NeuConfirmDialogComponent } from '@neural-ui/native/confirm-dialog';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Básico

Solicita el borrado del proyecto y decide si continuar o conservarlo. El ejemplo registra la decisión; la eliminación real corresponde a tu aplicación.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuConfirmDialogComponent } from '@neural-ui/native/confirm-dialog';
import { View, Text } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuConfirmDialogComponent, View, Text],
  template: `
    <view class="confirmation-example">
      <neu-button label="Eliminar proyecto" size="sm" variant="outline" tone="danger" (pressed)="open.set(true)" />
      <text accessibilityLiveRegion="polite">{{ deleted() ? 'Proyecto del ejemplo eliminado' : 'El proyecto sigue disponible' }}</text>
    </view>
    <neu-confirm-dialog closeLabel="Cerrar confirmación" title="¿Eliminar Lanzamiento móvil?" message="El proyecto se eliminará de tu espacio. Esta acción no se puede deshacer." confirmLabel="Eliminar" cancelLabel="Cancelar" intent="danger" [showCloseButton]="true" [(open)]="open" (confirmed)="deleteProject()" />
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.confirmation-example { gap: 12px; }
  `,
})
export class ExampleComponent {
  readonly open = signal(false);
  readonly deleted = signal(false);
  deleteProject(): void {
    this.deleted.set(true);
  }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Confirm Dialog · android · native capture — **Android**Captura nativa

Confirm Dialog · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	Obligatorio	Input	Encabezado de la superficie, sección o presentación.
message	string	Obligatorio	Input	Mensaje que explica un estado, notificación o decisión.
confirmLabel	string	'Confirm'	Input	Texto o nombre accesible utilizado para confirmar. No ejecuta la acción por sí solo.
cancelLabel	string	'Cancel'	Input	Texto o nombre accesible utilizado para cancelar. No ejecuta la acción por sí solo.
intent	"danger" \| "default"	'default'	Input	Utiliza danger para una confirmación destructiva. Cambia el color de la acción principal, no ejecuta la operación de la aplicación.
busy	boolean	false	Input	Mantiene una confirmación en curso y desactiva sus acciones mientras la aplicación termina la tarea.
showCloseButton	boolean	true	Input	Muestra una X arriba a la derecha. Al pulsarla emite cancelled y actualiza open. La X se oculta mientras busy impide el cierre. Activado por defecto.
closeLabel	string	'Close'	Input	Nombre accesible de la X de cabecera, independiente de cancelLabel. Close por defecto; personalízalo para el idioma de la app.
closeOnConfirm	boolean	true	Input	Cierra el diálogo y actualiza open antes de emitir confirmed. Activado por defecto. Usa false para una operación asíncrona: enlaza busy mientras se ejecuta y cierra open solo cuando termine correctamente.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
open	boolean	false	Model · bidireccional	Indica si se solicita mantener abierta la presentación o mensaje. Enlaza una signal escribible mediante [(open)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
confirmed	void	Solicita la confirmación. Ejecuta la operación real en el handler de la aplicación.
cancelled	void	Comunica la cancelación de la edición o confirmación actual.
opened	void	Comunica que la presentación nativa se ha abierto.
dismissed	void	Comunica la finalización del cierre nativo.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);