What is the use of `${}` in Angular?

Question

I sometimes see this kind of syntax inside backticks in TypeScript component files in Angular projects:

<div ${selector} [inDemo]="false" [config]="demoConfig">Demo Content</div>

Can somebody explain me this specific attribute ${}?

How does it work and when should I use it?

Probably just a template string: https://www.typescriptlang.org/docs/handbook/basic-types.html#string. A bit more context would help. — JB Nizet, Sep 18 '17 at 12:29
It's a TypeScript feature (string interpolation) and therefore only works for inline templates (`template: '...',` but not for external templates `templateUrl: './my_component.html'`, ) — Günter Zöchbauer, Sep 18 '17 at 12:30
Not `#` (ElementRef) but `${}`. I think it's indeed a TypeScript feature. I will dive more into it.. — ivanasetiawan, Sep 18 '17 at 12:31
@GünterZöchbauer Is it technically correct to call this a "TypeScript" feature? — , Sep 18 '17 at 12:38

score 3 · Answer 1 · answered Sep 18 '17 at 12:39

It's called template literals, It is a feature of ECMASCRIPT6 (ECMASCRIPT2015)

Without using it, you can concat a string with some variables by:

var a = 10, b = 15;
var string = "a equals to " + a + " and b equals to " + b;

By using template litteral, it will be simpler:

var a = 10, b = 15;
var string = `a equals to ${a} and b equals to ${b}`;

score 0 · Answer 2 · edited Sep 18 '17 at 12:54

0

The are serve for writing multi-line strings:

`string text`

`string text line 1  
string text line 2`

`string text ${expression} string text`

tag`string text ${expression} string text`

edited Sep 18 '17 at 12:54

answered Sep 18 '17 at 12:32

Salim Ibrohimi

2 Answers2