Chip

import { NeuChipComponent } from '@neural-ui/core/chip';

import { NeuChipComponent } from '@neural-ui/core/chip';
import { signal } from '@angular/core';

@Component({
  imports: [NeuChipComponent],
  template: `
    <!-- Chips estáticos / Static chips -->
    <neu-chip>Angular</neu-chip>
    <neu-chip variant="primary" [selected]="true">TypeScript</neu-chip>

    <!-- Filtros interactivos / Interactive filters -->
    @for (tag of tags; track tag) {
      <neu-chip
        [selected]="selected().has(tag)"
        [removable]="true"
        (selectedChange)="toggle(tag)"
        (removed)="remove(tag)"
      >{{ tag }}</neu-chip>
    }
  `
})
export class MyComponent {
  readonly selected = signal(new Set(['Angular']));
  tags = ['Angular', 'TypeScript', 'RxJS'];

  toggle(tag: string) {
    this.selected.update(s => {
      const n = new Set(s);
      n.has(tag) ? n.delete(tag) : n.add(tag);
      return n;
    });
  }

  remove(tag: string) {
    this.selected.update(s => { const n = new Set(s); n.delete(tag); return n; });
  }
}