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

The Angular expression {{ }} creates a binding that is managed by angular, where angular automatically monitors the changes to the property and can dynamically change the value of the property as it is changed at runtime, whereas the ES6 Template method parses the value once, at the first render.

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!