Angular - How to set <mat-progress-bar> value with an operation?

Question

I have this piece of code

<mat-progress-bar
mode="determinate"
value="10 + 10">
</mat-progress-bar>

But it is not working. If I wrap the value's operation with {{}} it works but I've read that it's not how it should be done. Is that true? How should it be done or is usually done?

Answer 1

The double curly braces are not that clean indeed. Use this instead:

<mat-progress-bar
mode="determinate"
[value]="10 + 10">
</mat-progress-bar>

The brackets indicate that you're entering an expression to evaluate, and not a value. Keep double curly braces for things like string templating.