title: Interpolated string not updated properly in Angular
body: <p>So I have an Angular component:</p>
  <pre><code>&lt;!-- login.component.html --&gt;
  
  ...
  &lt;!-- switch between login and register mode --&gt;
  &lt;a (click)=&quot;onToggleLoginRegister()&quot;&gt;
      {{ isLogin ? 'Register now' : 'Log in with my account' }}
  &lt;/a&gt;
  ...
  &lt;!-- button for action --&gt;
  &lt;button (click)=&quot;onClickLoginRegister()&quot;&gt;{{ submitButtonText }}&lt;/button&gt;
  </code></pre>
  <pre><code>// login.component.ts
  
  // ...
  export class LoginComponent implements OnInit, AfterViewChecked {
  
      // ...
  
      isLogin: boolean = true;
      submitButtonText: string = &quot;&quot;;
  
      ngAfterViewChecked(): void {
          this.submitButtonText = 'Login';
      }
  
      onToggleLoginRegister() {
          this.isLogin = !this.isLogin;
          this.submitButtonText = this.isLogin ? 'Login' : 'Register';
      }
  
      onClickLoginRegister() { ... }
  }
  </code></pre>
  <p>Basically the <code>&lt;a&gt;</code> acts as a switch between login and register mode. When I click it, the texts in both <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> should change accordingly. However, only the text in <code>&lt;a&gt;</code> gets updated, and the <code>&lt;button&gt;</code> text is always stuck to the initial value assigned in <code>ngAfterViewChecked()</code>. And I don't know why.</p>
  <p><em>(The reason why I design like this is that I need the button to show different texts in other cases)</em></p>
  <p>I tried to use a <code>ChangeDetecterRef</code> to force the change detection just like many posts said, but it didn't work.</p>
  <p>However, when I swap the two lines in <code>onToggleLoginRegister()</code>, i.e. update <code>submitButtonText</code> before <code>isLogin</code>, both texts will get updated (not as expected though). But in other cases, I would like to solely update the <code>submitButtonText</code>, which is unlikely to work.</p>
  <p>So I'm wondering if the difference in behavior is caused by the difference in data types (since the <code>&lt;a&gt;</code> is bound to a boolean and the <code>&lt;button&gt;</code> is bound to a string). And what would be the solution to this?</p>