notes-dialog.component.html

<mat-toolbar color="primary" class="dialog-toolbar">
    <h2 class="dialog-toolbar-title">{{ id ? 'Edit' : 'Add' }} Note</h2>
    <button mat-button mat-dialog-close class="close-btn"><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]="noteForm">
				<mat-form-field>
					<textarea [(ngModel)]="note" maxlength="512" formControlName="note" matInput mat-autosize="true" resizeToFitContent placeholder="i.e. Studying abroad">{{ note }}</textarea>
					<mat-hint align="start"><strong>Your note can be up to 512 characters long</strong> </mat-hint>
					<mat-hint align="end">{{ note.length }} / 512</mat-hint>
				</mat-form-field>
			</mat-dialog-content>
		</div>
		<mat-dialog-actions align="end">
			<button mat-button class="btn-secondary" mat-dialog-close>Cancel</button>
			<button mat-raised-button id="saveNote" class="btn-primary mat-button" (click)="saveNote()" [disabled]="!note || note.length > 512">Save</button>
		</mat-dialog-actions>

		<div id="delete-note-section" *ngIf="id">
			<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)="removeNote()" mat-dialog-close>Delete</button>
			</mat-dialog-actions>
		</div>
	</div>
</mat-dialog-content>