How to use es6 template literal as Angular Component Input

ES6 Template literals (Template strings) cannot be used inside an Angular component input, because the Angular compiler doesn't know this grammar.

The way that you provided is fine.

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

Or something like this,

In the component,

// In the component, you can use ES6 template literalname: string;input: string;    ngOnInit() {  this.name = 'Dinindu';  this.input = `My name is ${this.name}!`;}

In the HTML,

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

Also can use it as this way. Its really close to template literal,

<app-my-component myInput="My name is {{name}}"></app-my-component>

You can still use angular's interpolation syntax in attribute values:

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

It's up to you which you prefer to write, but unfortunately backticks are not allowed in binding expressions.

Using a template literal expression works as long as the template lives in the TS source and not in HTML. So the below does NOT work

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