Conditionally make input field readonly in Angular 2 or 4: Advice + Best/which way to do it

You need to use the following (Angular 4):

<input [readonly]="isReadOnly">

If you use att.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true.

In HTML, the following is sufficient to cause an input to be read-only:

<input readonly>