title: How do I change the button name depending on the route name without clicking it?
body: <p>I want to change the name of the button on my header. If I go to login it will change the name of the button to &quot;Signup&quot; and if I go to signup it will change the button name to &quot;Login&quot;. I want to change the button name without clicking it. My problem is when I use <code>this.router.navigate(['login'])</code> in another component the button name is not changed to &quot;signup&quot;. How can I do this? Here's my code:</p>
  <p>header.component.ts</p>
  <pre><code>changedText() {
      if(this.router.url.includes('/signup')) {
        this.text = 'Login';
      } else {
        this.text = 'Signup';
      }
    }
  </code></pre>
  <p>header.component.html</p>
  <pre><code>&lt;button *ngIf=&quot;!IsLoggedIn()&quot; mat-raised-button color=&quot;warn&quot; class=&quot;add-button me-2&quot; (change)=&quot;changedText()&quot; (click)=&quot;toggleButton()&quot;&gt;{{text}}&lt;/button&gt;
  </code></pre>