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?

LoïcR · Accepted Answer · 2017-04-18 11:37:43Z

37

{{ 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}`;
}

answered Apr 18, 2017 at 11:37

LoïcR

5,0371 gold badge37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elrond Over a year ago

Is it also Possible to use a Pipe here ? I want to some Strings for Translation in variables which are later displayed in a mat component

Maciej Kowalski · Accepted Answer · 2019-08-20 06:57:39Z

2

${} it is a string interpolation to display a value of string between typescript code. And {{}} is interpolation to display the content in HTML template.

edited Aug 20, 2019 at 6:57

Maciej Kowalski

26.7k12 gold badges59 silver badges66 bronze badges

answered Aug 20, 2019 at 6:52

Sushma Tiwari

214 bronze badges

Collectives™ on Stack Overflow

Interpolation in strings made using backtick operator

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related