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>
    <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>

    <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 { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { 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;

  constructor(private fb: FormBuilder) {
    this.noteForm = fb.group({
      title: new FormControl(''),
      note: 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();
    }
  }

  updateNote(event) {
    event.preventDefault();

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

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

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

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