Interpolate string with dynamic data with angular2

Question

I'm loading up data from the server via ajax requests. The JSON file has configurations for popups in the site.

popupData: {
   data:{ var_one: "hello", var_two: "world"},
   template: "the <b>{{var_two}}</b> say's {{var_one}}"
}

The variable names and template will be different for every occurrence of the popup.

How can I get this string interpolated with the data that comes with it? I need to pass the pre-built string to a component to be viewed using [innerHTML].

I may be missing something, but wouldn't a template literal help here? template `the <b>${var_two}</b> say's ${var_one}` — Sterling Archer
– Sterling Archer, Commented Apr 10, 2017 at 16:17
You can do this with good 'ol selectors. I have a popup component that is just a shell into which I load html fragments (I pass a value in the router url fragment, read it in the popup component, and load the indicated html page/fragment as the content). If I need to load variable data into that fragment, I just use a selector: querySelector ( '#popup_some_style_or_id_selector' ).innerHTML .= [whatever value you want]. In Angular 1, that loaded fragment could use ng-include and access the vals in the controller. that doesn't go in Ang 2/4. It's one thing that Angular still has to iron out. — Tim Consolazio
– Tim Consolazio, Commented Apr 10, 2017 at 17:03
@MikeRoberts you can indeed store template literals. They are evaluated to the json string — Sterling Archer
– Sterling Archer, Commented Apr 10, 2017 at 17:17

gsc · Accepted Answer · 2017-04-10 18:44:24Z

3

Somewhere after the data was received:

const popupString = popupData.template.replace(
  /{{\s?([^{}\s]*)\s?}}/g,
  (substring, parsedKey) => {
    const replacer = popupData.data[parsedKey];
    return typeof replacer !== 'undefined' ? replacer : substring;
  }
);

It should equal the <b>world</b> says Hello in your example.

Please note that this code comes from robisim74’s angular-l10n (MIT license).

answered Apr 10, 2017 at 18:44

gsc

1,5491 gold badge14 silver badges17 bronze badges

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

1 Comment

Mike Roberts Over a year ago

It works! Although I was hoping for something more built-in to angular. My other option was to use moustache or handlebars templates. It just seems weird you have to roll your own interpolation inside angular.

Collectives™ on Stack Overflow

Interpolate string with dynamic data with angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related