Is there a way to automatically update the button text based on the route name without requiring user interaction?

Question

Is there a way to automatically update the button text based on the route name without requiring user interaction?

I need to dynamically change the text on a button in my header based on the current route. When on the login page, the button should say "Signup" and when on the signup page, it should say "Login". I want this text change to happen without having to click the button. The issue I'm facing is that when I use this.router.navigate(['login']) in another component, the button text does not update to "Signup". How can I achieve this? Here is my code:

header.component.ts

changedText() {
    if(this.router.url.includes('/signup')) {
      this.text = 'Login';
    } else {
      this.text = 'Signup';
    }
  }

header.component.html

<button *ngIf="!IsLoggedIn()" mat-raised-button color="warn" class="add-button me-2" (change)="changedText()" (click)="toggleButton()">{{text}}</button>

javascript typescript angular13

Answer 1

Answer №1

declare class UserComponent implements OnInit {

  public message: string;

  constructor(private router: ActivatedRoute) {}

  ngOnInit() {
    this.router.url.subscribe((url) => {
      this.message = url[0].path == 'register' ?  'Register' : 'Log In';
    });
  }
  
}

Answer 2

declare class UserComponent implements OnInit {

  public message: string;

  constructor(private router: ActivatedRoute) {}

  ngOnInit() {
    this.router.url.subscribe((url) => {
      this.message = url[0].path == 'register' ?  'Register' : 'Log In';
    });
  }
  
}

Answer 3

Answer №2

Question:

  let isLoggedIn: boolean = this.checkIfLoggedIn();

  constructor(private readonly router: Router) {
  }

Solution:

  <button *ngIf="isLoggedIn" 
          mat-raised-button 
          color="primary" 
          class="add-button ml-3" 
          (click)="handleButtonClick()">{{label$ | async}}</button>

Answer 4

Question:

  let isLoggedIn: boolean = this.checkIfLoggedIn();

  constructor(private readonly router: Router) {
  }

Solution:

  <button *ngIf="isLoggedIn" 
          mat-raised-button 
          color="primary" 
          class="add-button ml-3" 
          (click)="handleButtonClick()">{{label$ | async}}</button>

Is there a way to automatically update the button text based on the route name without requiring user interaction?

Answer №1

Answer №2

Similar questions

Pressing ctrl+s will submit TinyMCE+JEditable

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

Securing Codeigniter with CSRF protection while using datatables and an AJAX URL

Converting an HTML form with empty values into JSON using JavaScript and formatting it

Utilizing Laravel and Jquery UI for asynchronous communication with the server, passing data from a post request to

nodemon and ts-node not working as expected, failing to automatically recompile

In what way can you establish a boundary for a border?

JavaScript dialog on top of a flash video

Creating atomic controller actions in Sails.js: A guide to optimizing your controller functions

Transforming an object containing methods into a string using Javascript specifically for Photoshop

Traversing JSON data in a recursive manner without definite knowledge of its size or nesting levels

Using JavaScript to Filter Arrays with Partial String Matching

What is the best way to determine which DOM element triggered a click event?

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

Modifying the date formatting in JavaScript if it is incorrect

Building an interactive array with checkboxes and mapping in React JS: A step-by-step guide

Unlimited Lunch Options and Navigational Links

Update the canvas box's color when you interact with it by clicking inside

Exploring Vue 3.3: Understanding Generics and Dynamic Properties

Calculating a 30-minute interval between two given times using JavaScript/jQuery