Does routerLink not always work in displaying components?

Question

I am currently using the new AnalogJS and I added a routerLink to a component that takes in the role (String) which can be either Designer/Creator. The route takes in a role param and the component accesses the param to get the string value. But the routerLink always doesn't work. UNLESS I reload the page. Super weird.

<a [routerLink]="['/signup/creator']" class="flex-1 my-6">
  <div class="mx-auto">
    ...
  </div>
</a>

I added RouterLink to import as well

@Component({
  selector: "app-signuprole",
  standalone: true,
  imports: [HeaderComponent, FooterComponent, RouterModule, RouterLink],
  templateUrl: "./(layouts)/signuprole.page.html",
})

I tried using Router by adding it to the constructor as shown below.

constructor(private router: Router) { }

navigateToSignup(role: string) {
  this.router.navigate(["/signup", role]);
}

and I added the click functionality instead of the routerLink='...', nevertheless it did not work as well.

UPDATE: window.location.href = '...'. Always works! but isnt this horrible for AnalogJS

Answer 1

You just need to modify the [routerLink] value inside the template a little bit to use a comma when passing the dynamic segment of the route (:role):

signuprole.page.html:

<a [routerLink]="['/signup', role]" class="flex-1 my-6">
  <div class="mx-auto">
    ...
  </div>
</a>

signuprole.component.ts:

import { Component } from '@angular/core';

    @Component({
      selector: "app-signuprole",
      standalone: true,
      imports: [HeaderComponent, FooterComponent, RouterModule, RouterLink],
      templateUrl: "./(layouts)/signuprole.page.html",
    })
    export class SignUpRoleComponent {
      role: string = 'creator'; // set initial role
    }

Answer 2

window.location.href = "..." This always works but might be horrible for projects