How to pass a string value to a component in angular2

Question

I'd like to pass a string value to a component in angular2, but it doesn't work with the default binding. I'm thinking of something similar to this:

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

Unfortunately, only expressions are allowed on the right side of the assignment. Is there a way to do this?

Günter Zöchbauer · Accepted Answer · 2016-09-11 14:45:54Z

207

String literals can be passed in different ways:

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

edited Sep 11, 2016 at 14:45

answered Mar 25, 2016 at 12:35

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alexander Abakumov Over a year ago

Is there any difference between those? E.g. would Angular create "bindings" in the last two cases or it's smart enough?

Günter Zöchbauer Over a year ago

Angular is smart enough. Only the first one will be visible in the DOM.

Eric Soyke Over a year ago

Thanks. I was passing without nested quotes and it was returning the value as NaN: <component [inputField]='string'></component>

mrtpain Over a year ago

Technically, I wouldn't suggest options 1 and 3. This will literally include those attributes and values on the component element as well as any elements within the component that may utilize those values. In example id="example-id" will pass the correct string desired, however, now there will be 2 elements with the same id attribute. Use this approach wisely...

Eric Martinez · Accepted Answer · 2016-03-25 12:33:37Z

53

You can pass a string by enclosing the string in quotes

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

answered Mar 25, 2016 at 12:33

Eric Martinez

31.8k9 gold badges94 silver badges91 bronze badges

Comments

Glenn · Accepted Answer · 2017-03-15 00:24:12Z

3

To include a single quote (and possibly other special HTML characters) in the string literal the first option works while those that use single quotes to wrap the literal fail with parse errors. For example:

<component inputField="John&#39;s Value"></component>

Will output "John's Value" correctly.

answered Mar 15, 2017 at 0:24

Glenn

70810 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to pass a string value to a component in angular2

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related