Input Tags | Neural Native

Importación

component.ts

import { NeuInputTagsComponent } from '@neural-ui/native/input-tags';

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.

Muchas habilidades, una persona

Crea un perfil de equipo con etiquetas editables y una vista previa en directo. Añade texto propio o elige una sugerencia, elimina etiquetas y respeta el mismo límite de cuatro en ambos casos.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { NeuChipComponent } from '@neural-ui/native/chip';
import { NeuInputTagsComponent } from '@neural-ui/native/input-tags';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuAvatarComponent, NeuChipComponent, NeuInputTagsComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Muchas habilidades, una persona</text><text class="product-caption">Ayuda a tu próximo colaborador a encontrarte</text></view>
    <view class="profile-preview"><text class="profile-kicker">PERSONAS NEURAL</text><view class="product-row"><neu-avatar label="Alex Morgan" size="lg" /><view class="product-copy"><text class="profile-name">Alex Morgan</text><text class="profile-role">Diseño de producto · Neural Studio</text></view></view>
    <view class="profile-skills">@for (skill of skills(); track skill) { <neu-chip removeLabel="Eliminar etiqueta" [label]="skill" [selectable]="false" tone="brand" /> } @empty { <text class="profile-role">Tus habilidades aparecerán aquí.</text> }</view></view>
    <view class="product-surface"><view class="product-row"><view class="product-copy"><text class="product-heading">Tu especialidad</text></view><text class="product-caption">{{ skills().length }} / 4</text></view><neu-input-tags removeLabel="Eliminar" label="Habilidades" placeholder="Añade una habilidad" [(value)]="skills" [max]="4" addLabel="Añadir habilidad" />
    <view class="product-section"><text class="product-caption">Un poco de inspiración</text><view class="skill-suggestions">@for (skill of suggestions; track skill) { @if (!skills().includes(skill)) { <neu-chip removeLabel="Eliminar etiqueta" [label]="skill" [disabled]="skills().length >= 4" (selectedChange)="addSkill(skill)" /> } }</view></view>
    <text class="product-caption">Añade hasta cuatro habilidades. La vista previa se actualiza al momento.</text></view></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); }
.profile-preview { gap: 18px; padding: 20px; border-radius: 18px; background-color: #e8effb; --neu-surface-secondary: #d6e4fa; --neu-text: #18375c; }
.profile-kicker { color: #45648d; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.profile-name { color: #18375c; font-size: 22px; line-height: 28px; font-weight: 600; }
.profile-role { color: #496486; font-size: 12px; line-height: 18px; }
.profile-skills, .skill-suggestions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  `,
})
export class ExampleComponent {
  readonly skills = signal<readonly string[]>(['Angular', 'Diseño']);
  readonly suggestions = ['Prototipado', 'Accesibilidad', 'Investigación'];
  addSkill(skill: string) { if (this.skills().length < 4 && !this.skills().includes(skill)) this.skills.update(value => [...value, skill]); }
}

Etiquetas de solo lectura

Muestra categorías del espacio sin permitir añadirlas ni eliminarlas.

Ver y copiar el ejemplo completo

read-only-tags.component.ts

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

@Component({
  selector: 'app-example',
  imports: [NeuInputTagsComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-input-tags addLabel="Añadir etiqueta" removeLabel="Eliminar" label="Categorías del espacio" [value]="categories" [readonly]="true" />
    </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 categories: readonly string[] = ['Producto', 'Móvil'];
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Input Tags · android · native capture — **Android**Captura nativa

Input Tags · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
readonly	boolean	false	Input	Impide editar o seleccionar desde el control y conserva el valor actual.
max	number	20	Input	Cantidad máxima de etiquetas admitidas.
addLabel	string	'Add'	Input	Nombre accesible de la acción con icono para añadir. También se puede añadir mediante la tecla de envío del teclado.
placeholder	string	''	Input	Ejemplo o indicación mientras el valor está vacío; conserva una etiqueta independiente.
removeLabel	string	'Remove'	Input	Prefijo accesible de la acción para eliminar cada etiqueta, seguido de su texto.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
value	readonly string[]	[]	Model · bidireccional	Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)].

Outputs

Nombre	Payload	Cuándo se emite
valueChange	readonly string[]	Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model.
touch	void	Comunica la interacción del usuario al formulario o aplicación que lo contiene.

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 value = signal<readonly string[]>([]);