Angular2 : Difference between ${..} and {{...}} in Template String

Question

In ES6, there is Template String feature, that is, we can form/concat string like this (with backtick)

const name = 'John';
const intro = `My name is ${name}`;

console.log(intro);

And in Angular 2 Component Template, we have double-curly braces of interpolation, which we can use to insert a value from a variable.

@Component({
   selector: 'selector-test-tag',
   template: `
   <div>
     <p>My name is ${name}</p>
     <p>My name is {{name}}</p>
   </div>
   `
})
export class Test {
   name: string;
}

Question: Are there any reason why choose one over the other one?

Answer 1

They are different things:

${} are used as placeholders in a template string, as you already know. These template strings are not the same as Angular's templates and you shouldn't use ${} in your Angular 2 templates. For starters, it won't work if you move the template to an external file.

{{}} is Angular's interpolation syntax and it's what you want to use in Angular 2 templates. You define a property or a method in a component class and use {{}} in the component's template to interpolate the value of that property or to call the method. You can also use expressions ({{a + b / 2}}) and pipes ({{title | uppercase}}).

A couple of resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Good luck!