Calculated properties and DatePicker

We can display calculated properties based on user input. For example, to display a person’s age based on their date of birth, introduce class properties that calculate the age and display it as follows:

src/app/user/profile/profile.component.ts
now = new Date()
get dateOfBirth() {
  return this.formGroup.get('dateOfBirth')?.value || this.now
}
get age() {
  return this.now.getFullYear() - this.dateOfBirth.getFullYear()
}

The implementation for the age property getter is not the most performant option. To calculate the age, we call the getFullYear() function of this.now and this.dateOfBirth. As a property referenced in the template, Angular’s change detection algorithm will call age up to 60 times per second, mixed with other elements on the screen, which can lead to major performance issues. You can resolve this issue by creating a pure custom pipe so that Angular understands only to check the age property if one...