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?
Template Literals is an ES6 feature (JavaScript 2015). Template Literals is not supported in Internet Explorer.
Template Literals (formerly called "template strings" in prior drafts of the ECMAScript 6 language specification) are string literals providing intuitive expression interpolation for single-line and multiline strings.
The basic syntax of JavaScript template literalsUsing the backticks, you can freely use the single or double quotes in the template literal without escaping.
Template literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders).
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With