Angular 2 equivalent to $interpolate

Question

Is there an Angular 2 equivalent to Angular 1's $interpolate? I want to take a string and an object and be able to replace tokens in the string with values from the object.

example:

let myTemplateStr = "Hello {{user.name}}, you are {{user.age.years}} years old"

//use the Angular2 equivalent of interpolate
let myTemplateCompiled = Angular2.Interpolate(myTemplateStr, { 
    user: { 
        name: "bob", 
        age: {
            years: 10
        }
     }})
//myTemplateCompiled ends up becoming "Hello bob, you are 10 years old"

I could write something that would do this for me but I would prefer to use a built in angular way if possible.

EDIT:

I should have mentioned that the interpolation needs to be able to to happen with string variable. I know typescript/es6 have backtick interpolation for literal strings, but I need to interpolate a string templated stored in a variable. Perhaps there is a way to use typescript built in interpolation for a string template in a variable that I am unaware of?

evo · Accepted Answer · 2017-07-24 14:11:25Z

6

A comment on a similar question pointed me to Lodash library and it's template function.

Add Lodash to your project:

$ npm install --save lodash
$ npm install --save @types/lodash

Then, in your .ts file:

import * as _ from "lodash";

let myTemplateStr = "Hello {{user.name}}, you are {{user.age.years}} years old";

let myVariables = {
    user: { 
        name: "bob",
        age: { 
            years: 10
        }
    }
}

// use custom delimiter {{ }}
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

// interpolate
let compiled = _.template( myTemplateStr );
let myTemplateCompiled = compiled( myVariables );

answered Jul 24, 2017 at 14:11

evo

911 silver badge3 bronze badges

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

Comments

chrispy · Accepted Answer · 2017-02-17 20:47:42Z

4

Angular 2 does not have this feature built in, but you could build one, such as in this article:

http://weblogs.thinktecture.com/pawel/2016/04/angular-2-interpolation-service.html

Typescript DOES have this feature, so you can use it if you're using typescript to build your Angular 2 application:

https://basarat.gitbooks.io/typescript/content/docs/template-strings.html

answered Feb 17, 2017 at 20:47

chrispy

3,6321 gold badge14 silver badges19 bronze badges

Comments

Teddy Sterne · Accepted Answer · 2017-02-17 21:14:53Z

4

In typescript you can use template strings to do the interpolation. Template strings are surround by back ticks and the values are surround by ${} statements. Here is an example of the string you provided:

let user: { 
    name: "bob", 
    age: {
        years: 10
    }
};
let myTemplateCompiled = `Hello ${user.name}, you are ${user.age.years} years old`;
//myTemplateCompiled ends up becoming "Hello bob, you are 10 years old"

edited Feb 17, 2017 at 21:14

answered Feb 17, 2017 at 20:48

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

1 Comment

tt9 Over a year ago

Hi, thanks for the answer, I forgot to mention I need the interpolation to happen from a variable. I added an edit explaining that now. Perhaps there is a way to do the typescript interpolation using a variable?

Collectives™ on Stack Overflow

Angular 2 equivalent to $interpolate

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related