CODEWITHSUNDEEP
angularangular2-template
Dominik Rabij
Dominik Rabij

Reputation: 75

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

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?

Upvotes: 6

Views: 1620

Answers (2)

Timothy
Timothy

Reputation: 3593

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.

Upvotes: 1

Tom Smykowski
Tom Smykowski

Reputation: 26129

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.

Upvotes: 1

Related Questions