Utiliza Switch para una preferencia inmediata de activado/desactivado, no para una acción. Su modelo es checked, no value. Conserva una etiqueta visible que explique el estado activado. readonly mantiene el foco e impide cambiar el estado; disabled deshabilita la interacción.
Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.
Prueba y configura
Vista previa
value.json
false
Los datos estructurados, callbacks y templates se muestran en los ejemplos y en la API.
El código añade las opciones avanzadas cuando difieren del valor predeterminado. Los datos y valores de esta configuración aparecen en el estado del template.
Template generado: refleja las opciones anteriores. La pestaña Código incluye los imports y el estado.
template.html
<neu-switch
[(checked)]="checked"
[label]="'Notificaciones por correo'"
/>
Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.
configured-state.ts
import { signal } from '@angular/core';
export const checked = signal(false);
Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.
Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El esquema exige el estado activado. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.
Utiliza [(checked)] o [checked] junto con (checkedChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.
Describe la preferencia activada con una etiqueta estable, no con un texto que cambie de Activado a Desactivado. Espacio modifica checked y el checkbox nativo comunica el estado actual. readonly mantiene el foco sin permitir cambios; disabled deshabilita la interacción. Asocia el texto de ayuda mediante ariaDescribedBy.
Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Este componente no tiene templates públicos.
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
dirty
boolean
false
[dirty]
Estado del formulario que indica que el usuario ha cambiado el valor.
disabled
boolean
false
[disabled]
Impide la interacción del usuario.
errors
readonly ValidationError.WithOptionalFieldTree[]
[]
[errors]
Errores de validación proporcionados por el formulario o la aplicación.
Identificador estable del control nativo; se genera si se omite.
invalid
boolean
false
[invalid]
Muestra el estado inválido; no añade una regla de validación.
label
string
''
[label]
Etiqueta visible y nombre accesible del control.
name
string
''
[name]
Nombre asociado al control nativo del formulario.
pending
boolean
false
[pending]
Estado del formulario que indica que hay una validación asíncrona pendiente.
readonly
boolean
false
[readonly]
Mantiene el control enfocable y legible sin aceptar cambios.
required
boolean
false
[required]
Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
touched
boolean
false
[touched]
Estado del formulario que indica que el control ha sido visitado.
Models
Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.
Nombre
Tipo
Por defecto
Uso en el template
Descripción
checked
boolean
false
[(checked)]
Modelo booleano. Enlaza [(checked)] o [checked] con (checkedChange), no value.
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
touch
void
(touch)="onTouch($event)"
Notifica al formulario que el control ha sido visitado; no es un cambio de valor.
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.
Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.
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-primary
Color de marca en controles activos y énfasis
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#007aff
--neu-surface-3
Superficies de controles destacados y al pasar el puntero
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#e2e8f0
--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-font-sans
Tipografía del texto
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
