Notes with tag inputs

note.component.html

<mat-card class="md-margin">
  <mat-toolbar [style.background]="'none'" *ngIf="note !== undefined">
    <span flex>{{ note.Title }}</span>
    <button mat-icon-button color="warn" (click)="deleteNote()">
      <mat-icon>delete</mat-icon>
    </button>
  </mat-toolbar>

  <div layout="column" *ngIf="noteForm.disabled" class="md-padding">
    <p>{{ note.Note }}</p>
    <mat-chip-list>
      <mat-chip *ngFor="let tag of tags" color="accent" selected>{{tag}}</mat-chip>
    </mat-chip-list>
    <p [style.color]="'lightgrey'">created on {{ note.CreatedOn | date }}</p>
  </div>
  <form [formGroup]="noteForm" (submit)="updateNote($event)" layout="column" *ngIf="noteForm.enabled"
    class="md-padding">

    <mat-form-field appearance="outline" flex>
      <mat-label>Title</mat-label>
      <input matInput formControlName="title" placeholder="Give this note a title" />
    </mat-form-field>

    <mat-form-field appearance="outline" flex>
      <mat-label>Note</mat-label>
      <textarea matInput formControlName="note" placeholder="Type up your note"></textarea>
    </mat-form-field>

    <mat-form-field appearance="outline" flex>
      <mat-chip-list #chipList>
        <mat-chip *ngFor="let tag of tags" [selectable]="'true'" [removable]="'true'" (removed)="removeTag(tag)">
          {{tag}}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
        <input matInput formControlName="tag" placeholder="New tag..." [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="'false'"
          (matChipInputTokenEnd)="addTag($event)">
      </mat-chip-list>
    </mat-form-field>

    <button mat-raised-button color="accent">
      {{ note !== undefined ? "Update Note" : "Create Note" }}
    </button>
    <button mat-raised-button *ngIf="note !== undefined">
      Cancel
    </button>
    <button mat-raised-button *ngIf="note === undefined" (click)="cancelNewNote()">
      Cancel
    </button>
  </form>

  <div layout="column" class="md-padding">
    <button mat-raised-button color="primary" *ngIf="noteForm.disabled" (click)="noteForm.enable()">
      Update Note
    </button>
  </div>
</mat-card>

note.component.ts

import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material';
import { IAlgoliaNote, INote } from 'firebasenoteapptypes';

@Component({
  selector: 'app-note',
  templateUrl: './note.component.html',
  styleUrls: ['./note.component.scss']
})
export class NoteComponent implements OnInit {
  @Input() note?: INote;
  @Output() update = new EventEmitter<INote>();
  @Output() delete = new EventEmitter<string>();

  noteForm: FormGroup;
  tags: string[] = [];
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];

  constructor(private fb: FormBuilder) {
    this.noteForm = fb.group({
      title: new FormControl(''),
      note: new FormControl(''),
      tag: new FormControl('')
    });
  }

  ngOnInit() {
    if (this.note) {
      this.noteForm.get('title').setValue(this.note.Title);
      this.noteForm.get('note').setValue(this.note.Note);
      this.noteForm.disable();
      if (this.note.Tags) {
        this.tags = this.note.Tags;
      }

      if (this.note['_tags']) {
        this.tags = this.note['_tags'];
      }
    }
  }

  addTag(event: MatChipInputEvent) {
    const index = this.tags.findIndex(x => x === event.value);

    if (index === -1 && event.value !== '') {
      this.tags.push(event.value);
    }
    this.noteForm.get('tag').setValue('');

    console.log(this.tags);
  }

  removeTag(tag: string) {
    const index = this.tags.findIndex(x => x === tag);
    if (index !== -1) {
      this.tags.splice(index, 1);
    }
    console.log(this.tags);
  }

  updateNote(event) {
    event.preventDefault();

    if (this.note === undefined) {
      this.note = {
        Id: '',
        Title: this.noteForm.get('title').value,
        Note: this.noteForm.get('note').value,
        Author: '',
        Tags: this.tags,
        CreatedOn: 0
      };
    } else {
      this.note.Title = this.noteForm.get('title').value;
      this.note.Note = this.noteForm.get('note').value;
      this.note.Tags = this.tags;
    }

    this.update.emit(this.note);
    this.noteForm.disable();
  }

  cancelNewNote() {
    this.update.emit(null);
  }

  deleteNote() {
    this.delete.emit(this.note.Id);
  }
}