title: How to use es6 template literal as Angular Component Input
body: <p>In my Angular 4 application, I have a component which takes a string input:</p>
  
  <pre><code>&lt;app-my-component [myInput]="'some string value'"&gt;&lt;/app-my-component&gt;
  </code></pre>
  
  <p>In some cases I need to pass a variable inside the string, for example:</p>
  
  <pre><code>&lt;app-my-component [myInput]="'My name is ' + name + '!'"&gt;&lt;/app-my-component&gt;
  </code></pre>
  
  <p>it would be nice if I could use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="noreferrer"><em>es6 template literals</em></a> (aka <em>template strings</em> or <em>back-tick strings</em>):</p>
  
  <pre><code>&lt;app-my-component [myInput]="`My name is ${name}!`"&gt;&lt;/app-my-component&gt;
  </code></pre>
  
  <p>but it doesn't work:</p>
  
  <blockquote>
    <p>Uncaught Error: Template parse errors:
    Parser Error: Unexpected token Lexer Error: Unexpected character [`] at column 1 in expression</p>
  </blockquote>
  
  <p>What's the correct way to accomplish it?</p>