[Fixed] How to perform property binding with disabled property in angular?

Issue

I was trying to print the names of only those cities for which the isDisabled value is true and the rest of the cities’ values should be in a disabled state. But I am getting errors as shown.
The kind of output i want is:

aaa , true
bbb , false
ccc , false
ddd , false

the first one should be highlighted and rest shoud be disabled.

HTML file:

<tr *ngFor="let x of cities;let i=index">
<td [disabled]="isDisabled[i]">
    <tr>{{x.name}} , {{isDisabled[i]}}</tr>
</td>

.ts file:

cities = [{ name: "aaa" }, { name: "bbb" }, { name: "ccc" }, { name: "ddd" }];
isDisabled=[true, false, false, false]

Template parse errors:
Can’t bind to ‘disabled’ since it isn’t a known property of ‘td’

Solution

You need some css code to solve your problem:

td.disabled {
    font-weight: bold;
    cursor: not-allowed;
}

Attaching this style to your code you can do the following:

<tr *ngFor="let x of cities;let i=index">
<td [class.disabled]="isDisabled[i]">
    {{x.name}}, {{isDisabled[i]}}
</td>
</tr>