How to use es6 template literal as Angular Component Input

In my Angular 4 application, I have a component which takes a string input:

<app-my-component [myInput]="'some string value'"></app-my-component>


In some cases I need to pass a variable inside the string, for example:

<app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component>


it would be nice if I could use es6 template literals (aka template strings or back-tick strings):

<app-my-component [myInput]="`My name is ${name}!`"></app-my-component>


but it doesn't work:

Uncaught Error: Template parse errors: Parser Error: Unexpected token Lexer Error: Unexpected character [`] at column 1 in expression
​

What's the correct way to accomplish it?

Continue reading...