How to use es6 template literal as Angular Component Input

Question

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?

0xdw · Accepted Answer · 2021-07-09T16:21:35.690

67

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>

edited Jul 09 '21 at 16:21

answered Nov 01 '17 at 15:04

0xdw

3,755
2
25
40

5

Is it still the case? What's the reason for that? I find it very strange that in 2020 it's still not supported. – Pramus Apr 16 '20 at 09:17
3

Because it would not work with inline templates - this request has been rejected by Angular team - https://github.com/angular/angular/issues/12914 – takrishna Jun 06 '21 at 08:50
1

Still not working in 2023. Just works in vuejs though ;) – Edwin May 16 '23 at 18:09

score 34 · Answer 2 · answered Nov 01 '17 at 15:04

34

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.

answered Nov 01 '17 at 15:04

Explosion Pills

188,624
52
326
405

4

Thank you, may I know why backticks are not allowed – Divek John Nov 18 '20 at 06:33
Because it would not work with inline templates - this request has been rejected by Angular team - https://github.com/angular/angular/issues/12914 – takrishna Jun 06 '21 at 08:51
1

you can't use the template literal inside {{ }} – serge Feb 16 '22 at 16:12

score 0 · Answer 3 · answered Jun 06 '21 at 09:18

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>

But the below WILL work

let displayString: String = 'I work in a string literal - ';

@Component({
  selector: 'app-product-alerts',
  template: `
    ${displayString} Tada !!
  `,
  styleUrls: ['./product-alerts.component.css']
})

If you want to explore live code here is a sample: https://stackblitz.com/edit/angular-qpxkbd-urdema?file=src%2Fapp%2Fproduct-alerts%2Fproduct-alerts.component.ts

This only works for very simple things. Something like `template: \`
${['banana', 'apple'].map(fruit=>\`
${fruit}
\`).join('')}
\`` will fail. — Sjeiti, Nov 16 '21 at 14:52

How to use es6 template literal as Angular Component Input

3 Answers3