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"><i class="material-icons">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
						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>