notes-dialog.component.html

<mat-toolbar color="primary" class="dialog-toolbar">
  <h2 class="dialog-toolbar-title">
    {{ data.hasExistingNote ? 'Edit' : 'Add' }} Note
  </h2>
  <button
    mat-button
    mat-dialog-close
    class="close-btn"
    aria-label="Close note dialog"
    cdkFocusRegionEnd>
    <i
      class="material-icons"
      alt="Close note dialog"
      matTooltip="Close note dialog"
      matTooltipPosition="above"
      >clear</i>
  </button>
</mat-toolbar>

<mat-dialog-content id="note-dialog" class="mat-typography dialog-with-toolbar">
  <div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
    <div id="note-content">
      <mat-dialog-content [formGroup]="form">
        <mat-form-field>
          <textarea
            cdkFocusInitial
            formControlName="textarea"
            matInput
            mat-autosize="true"
            resizeToFitContent
            placeholder="i.e. Studying abroad">
          </textarea>
          <mat-hint align="start">
            <strong
              >Your note can be up to {{ MAX_LENGTH }} characters long</strong>
          </mat-hint>
          <mat-hint align="end" *ngIf="form.value.textarea?.length > 0">
            {{ form.value.textarea.length }} / {{ MAX_LENGTH }}
          </mat-hint>
        </mat-form-field>
      </mat-dialog-content>
    </div>
    <mat-dialog-actions align="end">
      <button
        mat-button
        class="btn-secondary"
        mat-dialog-close
        aria-label="Close note dialog">
        Cancel
      </button>
      <button
        mat-raised-button
        id="saveNote"
        class="btn-primary mat-button"
        (click)="writeNote()"
        [disabled]="form.invalid">
        Save
      </button>
    </mat-dialog-actions>

    <div id="delete-note-section" *ngIf="data.hasExistingNote">
      <div>
        <h2>Delete note</h2>
        <p>Once the note is deleted, there is no going back.</p>
      </div>
      <mat-dialog-actions align="end">
        <button
          mat-raised-button
          class="btn-delete mat-button"
          (click)="deleteNote()"
          mat-dialog-close
          aria-label="Delete note from selected term">
          Delete
        </button>
      </mat-dialog-actions>
    </div>
  </div>
</mat-dialog-content>