tag like thing

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-tag',
  templateUrl: `<div>
  <form [formGroup]='tagForm'>
  <label for="tag-input">Category</label>
  <input type="text" id="tagInput" formControlName='tagInput' (keyup)="onKeyUp($event)" >
  <ul class="tag-list">
    <li *ngFor='let tag of tags' class="tag-item bg-info p-1 m-1 float-left text-white">
      {{tag}}<span class="remove-tag" (click)='onClick(tag)'>  x</span>
    </li>
  </ul>
</form>
</div>`,
  styleUrls: `span.remove-tag:hover {
    background-color: red;
}
`
})
export class TagComponent implements OnInit {

  tagForm: FormGroup;
  tags = ['test', 'jess'];

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.tagForm = this.fb.group({
      tagInput: '',
    });
  }

  onKeyUp(event: KeyboardEvent) {
    console.log(event);

    const pressedEnterKey = event.keyCode === 13;
    if (pressedEnterKey) {
      const ctrl = this.tagForm.get('tagInput');
      this.tags.push(ctrl.value);
      ctrl.reset();
    }
  }

  onClick(tagname: string): void {
    console.log('yeha -', tagname);
    this.tags = this.tags.filter(e => e !== tagname);
  }
}