How to use es6 template literal as Angular Component Input

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?



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

This 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() { = 'some name;
  this.input = `My name is ${}!`;

In the HTML,

<app-my-component [myInput]="input"></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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.