Interpolation in strings made using backtick operator

Question

I'm learning Angular 2 and I came across a few new things. I used ScratchJS extension of Chrome browser to learn TypeScript. While doing that, this is what I did for a backtick (`) string:

let user='user';
let msg=`Welcome ${user}! 
I can write multi-line string.

This is awesome!
`;
console.log(msg);

As you can see, this is how the variable user is used in the string. But when I do the same thing in an Angular 2 project, it's a bit different (and doing things like above will throw an error). For my dummy Angular 2 project, I made a simple component:

import { Component} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `

      Hi,  {{user}}

      I can write multi-line string.

      This is awesome!
  `,
  styles: []
})
export class UserComponent {

  user:string='John Doe';
  constructor() { 
  }
}

This works. But here, I'm using string interpolation using:

{{}}

instead of:

${}

And if I use that, it will throw an error. I know I understood some facts wrong. But can anyone explain what is it?

Answer 1

{{ foo }} will be handled by the template engine of Angular, binding the foo property defined in your class.

${ bar } will be handled by the Javascript string interpolation, which, while rendering, have no clue of what is the property bar of your object.

This is something closely related to how Angular work, this is not related to typescript or anything else. You can still use ${} if you are not in your Angular project, or not in the template.

For example, something like this should work, since the expression is evaluated before being returned, and is not dependant of the template engine:

public getUsername(): string {
    let username = 'test';
    return `Hi ${username}`;
}