Looking for guidance on how to display the sum of two properties from an observable data. Take a look at the code below and let me know your thoughts:
Typescript class
export class Amount {
Amount1: number;
Amount2: number;
Total:number;
}
In typescript service:
I have created an observable object
export class AmountService {
public newmessageService = new BehaviorSubject(new Amount());
public Model = this.newmessageService.asObservable();
}
In Component Class:
Subscribed to the observable Model in the calculation component
export class Calculation implements OnInit {
Model$:Amount;
ngOnInit() {
this.service.Model.subscribe(temp => this.Model$ = temp)
}
}
In component view :
The view includes inputs for Amount1 and Amount2 properties, with Total displayed below.
<form name="calculationform">
<mat-form-field class="example-full-width">
<mat-label>Amount1</mat-label>
<input matInput [(ngModel)]="Model$.Amount1" name="Amount1">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Amount2</mat-label>
<input matInput [(ngModel)]="Model$.Amount2" name="Amount2">
</mat-form-field>
<mat-label>Total:</mat-label>
<mat-label>{{Model$.Total}}</mat-label>
</form>
Currently seeking a way to automatically update the Total property based on changes in Amount1 and Amount2.
Your assistance is greatly appreciated.