Why the ngStyle directive is declared into the []?

Question

I am an absolute beginner with Angular 2 and I have the following dount related the correct syntax of the ngStyle directive.

I have this example (that works fine):

<p [ngStyle]="{backgroundColor: getColor()}">Server with ID {{ serverID }} is {{ getServerStatus() }}</p>

I know that, in this case, the ngStyle directive is adding something like to:

style="background-color: green;"

at my HTML paragraph.

My doubt is related the correct meaning of this syntax. Why is it:

[ngStyle]="{backgroundColor: getColor()}"

and not

ngStyle="{backgroundColor: getColor()}"

Why is it into the [...]? What it exactly means?

To make it simple : when you use [directive]="...", it sends data to the directive. When you use (directive)="...", the directive sends data to you. ngStyle is a built-in directive, if you look at the documentation, you can see what it does — user4676340

Poul Kruijt Poul Kruijt · Accepted Answer · 2017-06-09T10:08:35

It's called property binding. With the brackets the compiler tries to evaluate the expression. Without it, you are just passing a string.

So with the brackets, you are passing a javascript object:

{
    backgroundColor: getColor()
}

Whereby the compiler will call the getColor() method from the component to get the right color.

On the other hand, and going off topic here, but if you want to pass a string while using brackets, you should wrap them in single quotes:

<div [property]="'hiii'"></div>