kevinmerckx

<app-tags [tags]="tags" (tagsChange)="tags = $event"></app-tags>

kevinmerckx

<app-tags [(ngModel)]="tags" [disabled]="…"></app-tags>

<app-tags [ngModel]="tags" (ngModelChange)="myCallback($event)"></app-tags>

<app-tags [formControl]="tagsControl"></app-tags>

<app-tags formControlName="tags"></app-tags>

kevinmerckx

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  …
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TagsComponent),
    multi: true
  }]

kevinmerckx

export class TagsComponent implements ControlValueAccessor {
  onChange: (value: string[]) => void = () => {};
  onTouched: Function = () => {};
  isDisabled = false;
  
  …
  
  writeValue(value: string[]) {
    this.tags = value || [];
  }

kevinmerckx

<ul>
  <ng-template ngFor [ngForOf]="tags" let-tag let-index="index">
    <li>
      {{tag}}
      <button type="button" (click)="remove(index)">x</button>
    </li>
 </ng-template>
</ul>

<input type="text"

kevinmerckx

import { Component, forwardRef, HostBinding } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-tags',
  templateUrl: './tags.component.html',
  styleUrls: ['./tags.component.sass'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TagsComponent),