String intrapolation in Angular 2.0

Question

I have a string like {name} is my name. Greeting {sender}

is there some module in angualar 2.0, so that i can do something like string.format() as we do in C#?

I know this can be done using vanila js custom method, but i want to know is there any module inside angular 2 to handle this. They use interpolation in template binding so how to do that with a normal string

Not sure what you are asking but if you want to override the interpolation syntax this might be helpful: http://stackoverflow.com/questions/39819407/interpolateprovider-in-angularjs-2 — codef0rmer, Jan 18 '17 at 12:57
There is https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals. Angular itself doesn't provide anything. — Günter Zöchbauer, Jan 18 '17 at 12:58
I want to interpolate the string {name} is my name. Greeting {sender} to something like "Dinkar is my mane. Greeting codef0rmer". using something like string.formate("{name} is my name. Greeting {sender}","Dinkar","codef0rmer") — Dinkar Thakur, Jan 18 '17 at 12:59

seidme · Answer 1 · 2017-01-18T14:10:28.267

5

Check ES6 Template literals. It enables multi-line strings and string interpolation.

Example:

var name = 'John',
    age = 19;

console.log(`${name} is my name. I'm ${age}.`); 

// => John is my name. I'm 19.

TypeScript from version 1.4 supports ES6 Template literals and can compile them down to ES3/ES5 expressions.

edited Jan 18 '17 at 14:10

answered Jan 18 '17 at 13:02

seidme

12,543
5
36
40

i was looking something provided by the framework. Ends up creating prototype function for String and using it. Wonder this basic thing is not provided by the framework :( – Dinkar Thakur Jan 18 '17 at 13:40
If you're using Angular with TypeScript, then it's already available for use, since TypeScript from version 1.4 supports ES6 Template literals. – seidme Jan 18 '17 at 14:04

Teddy Sterne · Answer 2 · 2017-01-18T13:36:55.360

2

By using the back tick, grave, character you can achieve string interpolation similar to c#.

`${name} is my name. Greeting ${sender}`

This is a feature of TypeScript but does not do any formatting such as specifying decimal places. I would recommend keeping your string definitions on a single line because I have seen multiline definitions mess up styles in certain editors.

Here is a great article about template strings. The rest of the guide is a great resource for TypeScript in general.

edited Jan 18 '17 at 13:36

answered Jan 18 '17 at 13:00

Teddy Sterne

13,774
2
46
51

this is not a typescript feature. you this is ES6 feature. – Dinkar Thakur Jan 18 '17 at 13:39

score 0 · Answer 3 · answered Jan 18 '17 at 15:20

I came up creating and prototype method for string class Created Extention.ts file with code

interface String {
   format: (o:Object) => string;
}

String.prototype.format = function (o) : string {
   return this.replace(/{([^{}]*)}/g,
     function (a, b) {
       var r = o[b];
       return typeof r === 'string' || typeof r === 'number' ? r : a;
     }
   );
 };

then where i wanted to use the formatting i imported the extension file and use format method like

import '../../shared/interpolation'

export class ... {

    someMethod():void {
       var str = "{name} is my name. Greeting {sender}";
       let aa  = str.format({a:'dinkar',b:'Darth Vader'});
       console.log(aa);
    }
}

String intrapolation in Angular 2.0

3 Answers3