title: How to use ${text} interpolation from a variable in Angular?
body: <p>This question is about <code>ts</code> inline <a href="https://angular.io/guide/interpolation#text-interpolation" rel="nofollow noreferrer">text interpolation</a> in Angular (not template interpolation for the HTML files).</p>
  <p>I couldn't find relevant information about my question, so I'm not sure if this is even possible, is kindly appreciated if you provide source documentation in the case of what I'm asking can't be done.</p>
  <p>Currently I can do the following:</p>
  <pre class="lang-js prettyprint-override"><code>export class SomeClass {
      parseString(name: string): string {
          const baseString = `
              Hello ${name}...
          `;
          return baseString;
      }
  }
  
  // later... when `parseString` is called I get the following result:
  parseString('John');                             // Hello John...
  parseString('Mr. Smith');                        // Hello Mr. Smith...
  </code></pre>
  <p>What I want to do is something similar to this:</p>
  <pre class="lang-js prettyprint-override"><code>export class SomeClass {
      parseString(name: string, baseString: string): string {
          return baseString;
      }
  }
  // later... when `parseString` is called I want to get the following result:
  parseString('John', `Hello Mr.${name}`);         // Hello Mr.John...
  parseString('Mr. Smith', `Hi ${name}`);          // Hi Mr. Smith...
  </code></pre>
  <p>The syntax I'm proposing is completely wrong because <code>baseString</code> is evaluated before <code>name</code> even exists within its scope or has a value, and so it always returns the string without the variable value: <code>Hello Mr.</code> and <code>Hi </code>.</p>
  <p>I don't care about the syntax, any means for taking advantage of text interpolation from a variable would great. Ultimately I would like to be able to do something like this:</p>
  <pre class="lang-js prettyprint-override"><code>/** 
   * The reason that I'm using `of` from `RxJS` is that 
   * I want to show that I want to be able to gather labels from
   * anywhere, let's say a REST API or a service (?)
   **/
  of(`Greetings ${name}...`).subscribe(val =&gt; {
    const name = 'John';
    console.log(val);                              // Greetings John...
  });
  </code></pre>
  <p>Currently, to fulfill all this I just use:</p>
  <pre class="lang-js prettyprint-override"><code>parseString(name: string, baseString: string): string {
      return baseString.replace(/\$\{name\}/g, 'John');
  }
  </code></pre>
  <p>But I'm wondering if there's a feature I'm missing with <a href="https://angular.io/guide/interpolation#text-interpolation" rel="nofollow noreferrer">text interpolation</a>.</p>
  <h5>Edit:</h5>
  <p>The main difference between this question and the suggested duplicate <s>is that the suggested doesn't care if the back quoted text might be dynamic</s>, here I am trying to be able to &quot;create&quot; those back quoted strings from scratch or based on other variables.</p>
  <h5>Edit 2:</h5>
  <p>The suggested duplicate does answer my question <a href="https://stackoverflow.com/a/64597040/1657465">here</a>, but works only in <code>ES6</code> environments.</p>
  <h5>Edit 3:</h5>
  <p>Explaining briefly, the <code>ES5</code> vs <code>ES6</code> issue. I realized that the suggested duplicate question creates a <code>Function</code> object in runtime, with syntax only available in <code>ES6</code>, which means it'll not work on <code>ES5</code> environments. On the contrary, Angular TypeScript compilator can create code compatible with <code>ES5</code> when text interpolation is used.</p>