If you like to display calculated properties based on user input, you can follow the pattern shown here:
src/app/user/profile/profile.component.ts...get dateOfBirth() { return this.userForm.get('dateOfBirth').value || new Date()}get age() { return new Date().getFullYear() - this.dateOfBirth.getFullYear()}...
The usage of calculated properties in the template looks like this:
src/app/user/profile/profile.component...<mat-form-field fxFlex="50%"> <input matInput placeholder="Date of Birth" aria-label="Date of Birth" formControlName="dateOfBirth" [matDatepicker]="dateOfBirthPicker"> <mat-hint *ngIf="userForm.get('dateOfBirth').touched">{{this.age}} year(s) old</mat-hint> <mat-datepicker-toggle matSuffix [for]="dateOfBirthPicker"></mat-datepicker-toggle> ...
