Disabled attribute can't be set on material-input programatically

[sturmf]

What I want to achieve is actually to make a material-input readonly depending on some internal component state. Unfortunately material-input does not have a readonly property so we are left with disabled.

As it turns out we have to choices for disabled. One is setting the property disabled to true. This will paint the material-input in a greyed out state (not what I want) and the other choice is to set the attribute disabled on the html element (this is what I want).

Unfortunately it seems one can't set the attribute programmatically. I tried all possible combinations I could come up with:

<material-input disabled={{isReadonly}}>  // does not work since the value of an attribute does not matter, just if it is there or not

<material-input [attr.disabled]="isReadonly ? true : ''" // should work but never sets the attribute (or too late)

The only way I can achieve something similar is to use an ngIf to create two separate material-inputs depending on the state. One with the attribute and one without. But that is a lot of duplicate code.

Any ideas what I am doing wrong?

[sturmf]

I just figured out that <material-input disabled> also greys out the element and <material-input disabled="true"> behaves like I expect. This actually puzzles me even more. Is there any unintended interaction between the attribute and the property with the same name?

[nshahan]

There have been updates to the component so that now when the element is disabled it becomes read-only.

You should be able to set the disabled input programmatically with a variable in your controller.

<material-input [disabled]="myDisabledVariable"></material-input>

[ghost]

@nshahan Hi. in your case, I confirmed the component never changes even if myDisabledVariable changed. Is that correct?

I expected the component will change when props changes.