Как использовать литерал шаблона es6 как Angular Ввод компонента

В моем приложении Angular 4 у меня есть компонент, который принимает строковый ввод:

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

В некоторых случаях мне нужно передать переменную внутри строки, например:

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

было бы неплохо, если бы я мог использовать шаблонные литералы es6 (так называемые строки шаблона или обратные галочки):

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

но это не работает:

Неопознанная ошибка: ошибки синтаксического анализа шаблона: ошибка синтаксического анализатора: неожиданная ошибка лексера токена: неожиданный символ ['] в столбце 1 в выражении

Как правильно это сделать?

Ответы

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

// In the component, you can use ES6 template literal
name: string;
input: string;

ngOnInit() {
  this.name = 'some name;
  this.input = 'My name is ${this.name}!';
}

<app-my-component [myInput]="input"></app-my-component>

myInput="My name is {{ name }}!"