how can i use routerLink for api request in angular?

Question

I am creating an application in angular cli 11 over a music group and I have the following problem with the routes:

In the database I have a table called "members" that contains all their information. In the navbar, there is a drop-down where the members are displayed: enter image description here

this is the part of the code of menu.component.html:

<li *ngFor="let member of members">
   <a class="dropdown-item js-scroll-trigger" routerLink="/band/{{member.name}}">
      {{ member.name }}
   </a>
</li>

from this component i call to the api to get the info. menu.component.ts:

export class MenuStComponent implements OnInit {

   members: Member[] = [];

   constructor(private data: DataService) { }

   ngOnInit(): void {
       //this.data.getAllMembers().subscribe(data => console.log(data));
       this.data.getAllMembers().subscribe(data => this.members= data);    
    }

 }

Also I have a component called member, that displays the info, and also calls to the api. This is the structure. member.component.html:

<div class="row align-items-center no-gutters mb-4 mb-lg-5">

   <div class="col-xl-auto col-lg-auto"><img class="img-fluid mb-3 mb-lg-0" 
   src="http://localhost/web/back/web/{{member.image}}" alt="" /></div>
        <div class="col-xl-6 col-lg-7">

            <div class="featured-text text-center text-lg-left">
                <h4>{{member.name}}</h4> 
                       
                <p class="text-black-50 mb-0">{{member.instrument}}</p>

                <br>     
                   
                <p class="mb-0 text-black-50 justificado">
                      {{member.description}}
                </p>
            </div>                      
        </div>                
</div>

On member.component.ts I have the same that menu.component.ts

In app-routing I have the next:

{
path: 'band/:name',
component: MemberComponent
}

My idea is that when I click on a member in the navbar it redirects me to web.com/band/memberName, and depending on which member you have selected, show me their corresponding information. How can I do that?

UPDATE: I solved it with the next: member.component.ts:

export class IntegranteComponent implements OnInit {

  members: Member[] = [];
  member: string='';

  constructor(private data: DataService, private route: ActivatedRoute, 
  private router: Router) { }

  ngOnInit(): void {
    //this.data.getAllMembers().subscribe(data => console.log(data));
    this.data.getAllMembers().subscribe(data => this.members= 
    data);

    this.member = this.route.snapshot.params['name'];
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }
} 

Answer 1

If you can actually navigate to the member page you can just capture the member name from the url parameter and then fetch the member from the api.

This is how you can get the url parameter:

constructor(private route: ActivatedRoute){}

member: string;

ngOnInit(){
 this.route.params.subscribe((params: Params) => {
   this.member = params.name
 });
}

This way you can get the member name from the url and then fetch the member details from your api.