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 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>