Updating variable in Angular component when another variable has changed

Question

I try something like this:

component.ts

displayName: string;
email: string = `user+${this.displayName}@domain.com`;

component.html

<input type="text" [(ngModel)]="displayName" name="displayName">
<input type="email" [value]="email" name="email">

email is updated once when the app is loaded but not when displayName changes.

Do I need to use EventEmitter or ngOnChanges or anything else?

Answer 1

Reason is that displayName property is used to initialize email property value, hence consecutive reads of email property returns same value, no matter displayName is changed or not. instead what you need is to write a getter for email property and return value calculated based on displayName

Try following

get email(): string { return `user+${this.displayName}@domain.com`; }