Angular Passing string to component -- with or without binding?

user_5238447 0
Viewed 1105

I know there are several ways of passing string literal to component:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

Do they differ? Is Angular checking changes of the property in second and third way and not checking in the first one, or is Angular that smart, that it doesn't check any changes of properties containing string literals?

angular2-template angular
2 Answers

They differ in a way that the second version is the best. Say you have it in your code:

<component [inputField]="'string'"></component>

And now, you need to parametrize inputField value. What you need to do is replace 'string' with inputFieldProperty, a name of a parameter that has the desired value:

<component [inputField]="inputFieldProperty"></component>

As you can see it is an equivalent change to changing anything in JS (or TS):

inputField = 'string';

to:

inputField = inputFieldProperty;

So it's clear and easy to figure out. Cleanest solution out of 3.

tomaszs_389400

I'd rather say with brackets. @Tomasz Smykowski already explain a lot. But there there is a very important matter to highlight. Which is explain thoroughly on medium here. I just will recite it:

So, the rule of thumb — never use directives without square brackets.

user_95902510
Related