How to use es6 template literal as Angular Component Input

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.

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 literal
name: 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>