numbers in HTML component - node.js

Question

Hi I create team (It works), but I want to calculate prices. When you choose player (his price is available), I want to subtract from default price. So default price is 100 and if you choose player who cost 5, angular calculate to 95 and then send to database.
extract of HTML of one player:
<mat-form-field>
<mat-select placeholder="Goalkeepers" formControlName="goalkeeper">
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
</mat-option>
</mat-select>
<mat-error *ngIf="form.get('goalkeeper').invalid">Pleasse enter a goalkeeper.</mat-error>
</mat-form-field>
And than I have badget of team:
<p *ngFor="let userTeam of userTeamDetails">
<span *ngIf="userTeam.badget">
Tvoje dostupne peniaze: {{userTeam.badget}}M €
</span>
</p>
I tried to make {{userTeam.badget - player.price}}, but userTeam was not known and I don´t want to see in every player price.
What possibilities I have to calculate this? I don´t have any idea. Thanks.

Answer 1

You can use ng-container in conjunction with ngIf to conditionally display the calculated price only when the team and its budget exists. Example:
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
<ng-container *ngIf="userTeam?.badget">{{userTeam.badget - player.price}}</ng-container>
</mat-option>