How to conditionally set input tag's max value base on a value of a Angular component's variable

Question

I have 3-way input control is defined as following

<input type="range" min="0" max="2" formControlName="dhwOption" class="form-control-range" style="width:180px" id="myonoffswitch2">

I would like to dynamically set the range from 2 to 1 using a component class variable's value, it does not work

 <input type="range" min="0" max= {*ngIf="appEngineMsg && appEngineMsg.Type === 0"}?"1" :"2" formControlName="dhwOption" class="form-control-range"

Answer 1

Remove the braces and quotes and try the following code, assuming appEngineMsg is a variable in the .ts

<input type="range" min="0" max="appEngineMsg && appEngineMsg.Type === 0 ? 1 : 2" formControlName="dhwOption" class="form-control-range"

Answer 2

You should use property binding syntax and take advantage of the safe navigation operator :

[max]="appEngineMsg?.Type === 0 ? 1 : 2"

Answer 3

This is a working solution for my own project

<input type="range" min="0" max='{{appEngineMsg && appEngineMsg.Type === 0 ? 1 : 2}}'>