How to call a function from an HTML template using observables? - html

Question

I used to call functions from the template but I learned recently that it is not a good idea since it renders time. I tried to assign value to variable and subscribe it to change using setting service observables but it does not work for me.
public getMaxUnit(){
return MaxUnits.Dollars;
}
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: getMaxUnit()}}</td>
</tr>
</tbody>
</table>
</div>
How can I assign please the value to a variable using .subscribe() method?

Answer 1

You can use observables in your html page with async pipe.
In your code, your pipe takes an observable parameter.
To achieve this you need to wrap your getMaxUnit with async pipe.
Here is a similar example you can check and you can change getDateFormat function to how its date is changing.
public getMaxUnit():Observable<string>{
return of(MaxUnits.Dollars);
}
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let maxValue of maxValueTable">
<td> {{ maxValue | numberFormatter: (getMaxUnit() | async)}}</td>
</tr>
</tbody>
</table>
</div>