notes.component.html

<div *ngIf="user | async as User">
  <button mat-raised-button color="accent" (click)="newNote = true">
    Create Note
  </button>

  <h2 *ngIf="User.NumNotes === 0">Looks like there are no notes to display</h2>
  <h2 *ngIf="User.NumNotes > 0">You have {{ User.NumNotes }} notes</h2>

  <app-note *ngIf="newNote" (update)="createNote($event, User.Id)"></app-note>

  <app-note
    *ngFor="let note of notes | async"
    [note]="note"
    (update)="updateNote($event)"
    (delete)="deleteNote($event)"
  ></app-note>
</div>

notes.component.ts

import { Component, OnInit } from '@angular/core';
import { INote, IUser } from 'firebasenoteapptypes';
import { Observable } from 'rxjs';
import { NotesService, UserService } from 'src/app/services';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.scss']
})
export class NotesComponent implements OnInit {
  user: Observable<IUser>;
  notes: Observable<INote[]>;

  newNote = false;

  constructor(
    private noteService: NotesService,
    private userService: UserService
  ) {
    this.user = this.userService.user;
    this.notes = this.noteService.notes;
  }

  ngOnInit() {}

  updateNote(note: INote) {
    this.noteService.updateNote(note);
  }

  createNote(note: INote, userId: string) {
    if (note === null) {
      this.newNote = false;
    } else {
      note.Author = userId;
      this.noteService.addNote(note);
      this.newNote = false;
    }
  }

  deleteNote(id: string) {
    this.noteService.deleteNote(id);
  }
}