Angular very simple chips module

gistfile1.txt

// Component

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

const CHIPS_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => UiChipsComponent),
  multi: true
};
@Component({
  providers: [CHIPS_CONTROL_ACCESSOR],
  selector: 'ui-chips',
  templateUrl: './chips.component.html',
  styleUrls: ['./chips.component.scss']
})
export class UiChipsComponent  implements ControlValueAccessor {
  private onTouch: Function;
  private onModelChange: Function;
  @Input() tabindex: number = 1;
  @Input() chips: Array<string> = [];
  @ViewChild('chip') chip: ElementRef;

  registerOnTouched(fn) {
      this.onTouch = fn;
  }

  registerOnChange(fn) {
    this.onModelChange = fn;
  }

  writeValue(value) {
    const chip = this.chip.nativeElement;
    //this.renderer.setAttribute(chip, 'value', value);
  }

  onInput(event){
    const value = this.chip.nativeElement.value;
  }

  onKeyPress(event){
    const input = this.chip.nativeElement;
    if(event.keyCode === 13) {
      event.preventDefault();
      this.chips = [...this.chips, input.value.trim()];
      input.value = '';
      this.onModelChange(this.chips);
      this.onTouch();
    }
  }

  onDeleteChip(chip){
    this.chips = this.chips.filter(c => c !== chip);
  }

  constructor( private renderer : Renderer2) {}
}

// Template

<div class="chips">
  <ul>
    <li *ngFor="let chip of chips">
      <div class="chip">
        <span>{{chip}}</span>
        <span aria-hidden="true" (click)="onDeleteChip(chip)">&times;</span>
      </div>
    </li>
  </ul>
</div>
<div class="input-group">
  <input
  type="text"
  class="form-control form-control-lg"
  placeholder="add a tag"
  [tabindex]="tabindex"
  #chip
  (input)="onInput($event)"
  (keypress)="onKeyPress($event)">
</div>

// Scss

@import "theme-variables";

.chips{
  margin-bottom: .5rem;
  ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  li {
    margin-top: .3rem;
    margin-right: .5rem;
    line-height: 1;
  }
  .chip{
    display: flex;
    align-items: center;
    padding: .3rem .8rem;
    border: 1px solid theme-color("light");
    border-radius: 1.5rem;
    span{
      display: inline-block;
    }
    span:last-child{
      padding-left: 1rem;
      font-size: 1.5rem;
      cursor: pointer;
    }
  }
}

// Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UiChipsComponent } from './chips.component';

const UI_CHIPS = [UiChipsComponent];

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: UI_CHIPS,
  exports: UI_CHIPS
})
export class UiChipsModule { }


// Usage

<ui-chips [chips]="chips" [tabindex]="4" formControlName="tags"></ui-chips>