Angular 2: String interpolation with function call

Question

I am developing my first Angular app and having trouble with string interpolation.

I have a component which contains the following element:

`<span>{{action.getText()}}</span>`

action is of Type Action which has the following method:

getText(): String { return "Test"; }

The variable action is defined correctly since I can access properties via {{}} without a problem. e.g. {{action.title}}

So my question is, is this even possible to access this function and if yes, what am I doing wrong?

How action looks like? I usually use string datatype not String — Avinash Raj
– Avinash Raj, Commented Feb 22, 2017 at 14:00
Try with a propery getter get text() { return "Test"; } and {{action.text}}. Work only if the action object come from your component ts file or from a local variable defined with the # tag. — Maxime Gélinas
– Maxime Gélinas, Commented Feb 22, 2017 at 14:07
@MaximeGélinas i now have get text() { return "Test";} and {{action.text}} in my component. But there is now no text shown (at least it doesn't crash anymore). The variable action is defined in the associated Component file — Luca
– Luca, Commented Feb 22, 2017 at 14:18
@AvinashRaj this class only holds a few variables and this method. What's the difference between string and String? — Luca
– Luca, Commented Feb 22, 2017 at 14:19
And for general understanding: So, it's not possible to call a function this way? Let's say, my class Action has a date property and i want to display the minutes value. Then i cannot write {{action.date.getMinutes()}} — Luca
– Luca, Commented Feb 22, 2017 at 14:25

Cobus Kruger · Accepted Answer · 2017-02-22 14:28:20Z

4

You could convert it to a property:

get text(): string { return "Test"; }

Your template becomes:

<span>{{ation.text}}</span>

answered Feb 22, 2017 at 14:28

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

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

9 Comments

Cobus Kruger Over a year ago

Scratch that. You can convert to a property, but binding to a function result actually works as expected.

Luca Over a year ago

Now, it shows nothing at all where the <span> should be

Cobus Kruger Over a year ago

Anything in the console?

Luca Over a year ago

So, in your comment you're saying that action.getText() should actually work fine?

Luca Over a year ago

With the function call action.getText() the application crashes. With the getter, there's nothing in the console

|

Cobus Kruger · Accepted Answer · 2017-02-24 18:55:55Z

0

You refer to action.title, but ation.getText(). Certainly a typo?

<span>{{action.getText()}}</span>

edited Feb 24, 2017 at 18:55

answered Feb 22, 2017 at 14:33

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

1 Comment

Luca Over a year ago

ation is a typo, which I have now corrected. The reference to action.title should just show, that the variable is defined correctly, since i can access this property.

Collectives™ on Stack Overflow

Angular 2: String interpolation with function call

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related