string interpolation in angular 2 and it's dynamicity

Question

In Angular2, why if i put a property in a simple view, like this:

<span>{{allowServer}}</span>

it change whenever its value change on its .ts file, and if i put it like this:

<button class="btn btn-primary" disabled={{allowServer}} >server</button>

the button doesn't get the new value disabled?

So, what is the rule for which I have to use interpolation instead of binding syntax?

[disabled]=allowServer

yurzui · Accepted Answer · 2017-10-02 05:24:22Z

[prop]="value"

is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element).

binds a value to a property. The value is stringified (aka interpolation)

See lets look at an example:

<button id="button1" disabled={{allowServer}} >server</button>
<button id="button2" [disabled]={{allowServer}} >server</button>

1) allowServer === true

button1.disabled = 'true' // string

button2.disabled = true   // boolean

2) allowServer === false

button1.disabled = 'false' // string so disabled is true

button2.disabled = false// boolean

As you can see button1 will always be disabled