Alert | Neural Native

Importación

component.ts

import { NeuAlertComponent } from '@neural-ui/native/alert';

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.

Aviso con cierre

Prueba avisos de advertencia y éxito junto a un borrador personal. El interruptor solo cambia la vista previa; editar el borrador, cerrar el aviso de éxito y restaurarlo son acciones locales independientes. No se envía ni guarda nada en un servidor.

Ver y copiar el ejemplo completo

dismissible-feedback.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuSwitchComponent, NeuAlertComponent, NeuAvatarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Deja claro el siguiente paso</text><text class="product-caption">Mensajes que te ayudan a continuar</text></view>
    <view class="note-cover"><text class="note-kicker">NOTAS NEURAL / 07</text><text class="note-title">Una buena idea, a mano.</text><view class="product-row"><neu-avatar label="Ada Lovelace" size="sm" /><view class="product-copy"><text class="note-author">Ada Lovelace</text><text class="note-caption">Borrador personal · En esta pantalla</text></view></view></view>
    <view class="product-section"><text class="note-section-label">VISTA PREVIA DE CONEXIÓN</text><neu-switch label="Simular modo sin conexión" [(checked)]="offline" />
    <neu-alert [title]="offline() ? 'Vista previa sin conexión' : 'Conexión disponible'" [message]="offline() ? 'Tu borrador se conserva aquí mientras pruebas el estado de aviso.' : 'Vista previa de éxito. Sigue editando tu borrador local.'" [tone]="offline() ? 'warning' : 'success'" [closable]="!offline()" closeLabel="Cerrar confirmación" [visible]="offline() || visible()" (visibleChange)="visible.set($event)" /></view>
    <view class="note-editor"><text class="note-section-label">TRABAJO EN CURSO</text><neu-input requiredLabel="Obligatorio" label="Nota del borrador" [(value)]="note" /><text class="product-caption">Un lugar para ese detalle que no quieres olvidar.</text></view><view class="product-actions"><neu-button label="Mostrar confirmación" size="sm" variant="outline" [disabled]="offline()" (pressed)="visible.set(true)" /></view><text class="product-caption">Esta vista previa no cambia tu conexión ni guarda en un servidor.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.note-cover { gap: 18px; padding: 22px; border-radius: 20px; background-color: #def0e9; --neu-text: #173f36; --neu-muted: #45675d; }
.note-kicker { color: #45675d; font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.note-title { color: #173f36; font-size: 30px; line-height: 36px; font-weight: 600; }
.note-author { color: #173f36; font-size: 13px; line-height: 19px; font-weight: 600; }
.note-caption { color: #45675d; font-size: 11px; line-height: 17px; }
.note-section-label { color: var(--neu-muted, #596477); font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.note-editor { gap: 14px; padding: 18px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
  `,
})
export class ExampleComponent {
  readonly offline = signal(false);
  readonly visible = signal(true);
  readonly note = signal('Revisa la pantalla de bienvenida con el equipo.');
}

Colores semánticos

Compara los seis colores semánticos que proporciona el tema.

Ver y copiar el ejemplo completo

semantic-colors.component.ts

import { Component } from '@angular/core';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAlertComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-alert closeLabel="Cerrar aviso" title="Actualización del espacio" message="Hay una nueva versión disponible." tone="brand" />
    <neu-alert closeLabel="Cerrar aviso" title="Borrador guardado" message="Solo tú puedes ver este borrador." tone="neutral" />
    <neu-alert closeLabel="Cerrar aviso" title="Conectado" message="Tus cambios están sincronizados." tone="success" />
    <neu-alert closeLabel="Cerrar aviso" title="Espacio compartido" message="Invita a tu equipo cuando quieras." tone="info" />
    <neu-alert closeLabel="Cerrar aviso" title="Almacenamiento casi lleno" message="Revisa los archivos adjuntos antiguos para liberar espacio." tone="warning" />
    <neu-alert closeLabel="Cerrar aviso" title="Error al subir" message="Comprueba la conexión e inténtalo de nuevo." tone="danger" />
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Contorno y texto sin icono

Compara un aviso con contorno y un mensaje informativo sin icono.

Ver y copiar el ejemplo completo

outline-and-text-only.component.ts

import { Component } from '@angular/core';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAlertComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-section">
    <neu-alert closeLabel="Cerrar aviso" title="Acción necesaria" message="Actualiza el método de pago." tone="danger" variant="outline" />
    <neu-alert closeLabel="Cerrar aviso" message="Tu borrador está disponible sin conexión." tone="info" variant="outline" [showIcon]="false" />
    </view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Acción complementaria

Proyecta una acción compacta bajo el mensaje del aviso. Su evento pertenece a la aplicación.

Ver y copiar el ejemplo completo

projected-action.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuAlertComponent } from '@neural-ui/native/alert';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuAlertComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-alert closeLabel="Cerrar aviso" title="Cambios guardados en el dispositivo" message="Vuelve a conectarte para sincronizar tu espacio de trabajo." tone="warning">
      <neu-button label="Ver cambios sin conexión" size="sm" variant="text" tone="neutral" (pressed)="requested.set(true)" />
    </neu-alert>
    <text class="usage-caption" accessibilityLiveRegion="polite">{{ requested() ? 'Cambios sin conexión solicitados' : 'Tus cambios permanecen en este dispositivo' }}</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly requested = signal(false);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Alert · android · native capture — **Android**Captura nativa

Alert · ios · native capture — **iOS**Captura nativa

Personalización

Contenido proyectado

Después del mensaje, dentro de la columna de texto del aviso. Añade un enlace de apoyo o una acción compacta; Alert mantiene el título, el mensaje y el cierre.

Utiliza elementos nativos de @ng-native/components y controles públicos de Neural Native. Los estilos Angular pertenecen al componente que declara este contenido.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
title	string	''	Input	Encabezado de la superficie, sección o presentación.
tone	NeuTone	'info'	Input	Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color.
variant	NeuAlertVariant	'soft'	Input	La variante soft utiliza un fondo suavemente teñido; outline utiliza un fondo transparente y un borde semántico. Ambos conservan el tono elegido.
showIcon	boolean	true	Input	Muestra el icono del estado semántico. El input svg sustituye el icono predeterminado sin cambiar el tono.
svg	string	''	Input	String con el SVG del icono. El valor currentColor permite aplicar el color del tema mediante el renderizador nativo.
message	string	Obligatorio	Input	Mensaje que explica un estado, notificación o decisión.
closable	boolean	false	Input	Muestra una acción para cerrar el mensaje o superficie actual.
closeLabel	string	'Close'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
visible	boolean	true	Model · bidireccional	Visibilidad actual del visor de imágenes. Enlaza una signal escribible mediante [(visible)].

Outputs

Nombre	Payload	Cuándo se emite
visibleChange	boolean	Emite el valor actualizado de visible. [(visible)] enlaza este output junto con su input model.
closed	void	Comunica una solicitud de cierre; consulta el payload declarado antes de compartir handlers entre overlays.

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 visible = signal<boolean>(true);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';

NeuAlertVariant

NeuAlertVariant.ts

import type { NeuAlertVariant } from '@neural-ui/native/alert';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuAlertVariant = 'soft' | 'outline';