title: Angular 5 auto update string variable on another variable change
body: <p>Is there a way to update a string variable when another variable changes? I have a string that is built by using various variables. I display that string in the component's html file using interpolation. However, if a variable changes that the string was using to build itself, the string will never change because they not mutable. Only way would be to reset the string again when one of the other variables change.</p>
  
  <p><strong>Sample ts code:</strong></p>
  
  <pre><code>import { Component} from '@angular/core';
  
  @Component({
      selector: 'app-test-component',
      templateUrl: './test.component.html',
      styleUrls: ['./test.component.scss']
  })
  export class TestComponent {
  
      myString = '';
      amount = 0;
  
      constructor() {
          this.myString = `Hello, you have ${this.amount} dollars.`;
  
          setTimeout(() =&gt; {
              this.amount = 40;
          }, 5000);
      }
  }
  </code></pre>
  
  <p><strong>Sample html code:</strong></p>
  
  <pre><code>&lt;p&gt;{{ myString }}&lt;/p&gt;
  </code></pre>
  
  <p>Of course, after five seconds, the string stays the same because I never reinitialized it. Is there a way to automatically detect if any of the variables being used inside <code>myString</code> change, then update <code>myString</code> to use the values of the changed variables?</p>
  
  <p>Thank you, any information is appreciated!</p>