javascript - HTML typescript Comparing values in declaration Syntax

Question

So right now I'm not sure of the syntax of comparing a value from TypeScript/JavaScript in HTML.

For example:

Typescript:

val1 = 0;

.HTML:

<ion-progress-bar class="my-bar" [color]="{{val1}} > 50 ? 'green' : 'red'"  value={{val1}} ></ion-progress-bar>

I read some HTML documentation that said to use greater than symbol you'd use >, but this didn't work at all.

I want the color to be green if val1 > 50 and red otherwise in HTML.

标签： javascripthtmlcsstypescriptionic-framework