Can't get the specific user information to be displayed on the page in Angular

I have come across the problem, namely I cannot get the program to display the info of the specific user when clicking on it. The best I could manage is the displaying of every user together. Can you help me with this problem?

Here is the code:

service.ts :

    import { Injectable } from '@angular/core';
    import {HttpClient} from '@angular/common/http'
    import {Observable} from 'rxjs';

@ Injectable({providedIn: 'root'})

export class JSONPlaceholderpostsService {
constructor(private http: HttpClient) { }

getData():Observable<any> {
const url = "https://jsonplaceholder.typicode.com/users"
return this.http.get<any>(url)}}     

The Component.ts:

import { Component, OnInit } from '@angular/core';
import { JSONPlaceholderpostsService } from 'src/app/posts/jsonplaceholderposts.service';

@ Component({
selector: 'app-userinfo',
templateUrl: './userinfo.component.html',
styleUrls: ['./userinfo.component.css']})

export class UserinfoComponent implements OnInit {
data:Array<any>

constructor(private JSONPlaceholder: JSONPlaceholderpostsService,){

this.data = new Array<any>()}

ngOnInit(): void {this.getUserInfoFromAPI()}

getUserInfoFromAPI(){
this.JSONPlaceholder.getData().subscribe((data) => {
console.log(data)this.data = data})}

And the component.html file:

<p>USER INFO</p>

<ul *ngFor="let element of data">
<li><button (click)="getUserInfoFromAPI()">{{element.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{element.adress}}</button></li>
</ul>

<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>
 

Thank you all in advance

what I want to happen is that instead of the list of every user just the specific user info to be displayed.

here how I may make it work

for the route I will use the id instead of the name

{path: 'userinfo/:id', component: UserinfoComponent}

and then for useInfo, I will take the user id from the route and filter the list to to get the user and then use this user

Html

    <p>USER INFO</p>

<ul >
<li><button (click)="getUserInfoFromAPI()">{{user.id}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.name}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.email}}</button></li>
<li><button (click)="getUserInfoFromAPI()">{{user.adress}}</button></li>
</ul>

<button ><a hrer="#" routerLink="/userposts" routerLinkActive="actvie">POSTS</a></button>
 

and ts

 import { Component, OnInit } from '@angular/core';
import { JSONPlaceholderpostsService } from '../posts/jsonplaceholderposts.service';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-userinfo',
  templateUrl: './userinfo.component.html',
  styleUrls: ['./userinfo.component.css'],
})
export class UserinfoComponent implements OnInit {
  user: any = '';

  constructor(private JSONPlaceholder: JSONPlaceholderpostsService, private route: ActivatedRoute) {
    
  }
  ngOnInit(): void {
    this.getUserInfoFromAPI();
  }

  getUserInfoFromAPI() {
    this.JSONPlaceholder.getData().subscribe((data) => {
      const userID = this.route.snapshot.paramMap.get('id') || "";

      [this.user] = data.filter((user) => user.id == userID);
    });
  }
}