Angular http service displaying tab details depending on Json key

Question

I am note sure if it is possible but here's what I am trying to do:

I would like to fill empty templates depending from the td clicked, for exemple if you clicked on <td *ngFor="let user of userService.user | async">{{user.data.server1}}</td> then you move to the server1.component.ts details page witch contains the server1 Json object details

==> I found things with requestOptions.params thats an idea ..so it's like the datas are fetch by a get request comming from the Json and returning the datas according to the selected row from the tab

Same idea as in php when you do something like this: <?php echo $_GET['link'];

In 1 row = 1 Json object = 1 page (parent with tab and child displaying details from each row)

In other word each clicked row of the tab will be a page displaying plenty details about the choosen Json object (charts, %indicators,)

NOTE :  I don't want to code plenty plenty child components for each row, I would like just one child component filling by the different object Json different in each row...

I think using that method it could works maybe How to pass url arguments (query string) to a HTTP request on Angular 2

My request is also a bit similar to that question, I am actually trying to adapt that code : Angular http service clear RequestOptions search parameters

Not sure if the routerLink is needed maybe everything is possible with the correct http service configuration

If anyone got an idea? Thanks in advance...

json:

user {
{ data 
  }, {
server1 {
 "id": 1,
 "name": "Leanne Graham",
 "username": "Bret",
 "email": "Sincere@april.biz",
 "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
   },
   server2 {
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
   },
 }
}

tab.html:

<table>
<tr routerLink=""/my-Server1>
   <td *ngFor="let user of userService.user | async">{{user.data.server1}}</td>
</tr>
</table>

service.ts:

@Injectable()
export class UserService {
  users: Observable<User[]>;
    constructor (public http: Http) {
          const tick$ = Observable.timer(100, 60000);

          this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<User[]>[]).refCount();
 }
}

server1.html :

<div ngFor=""let user of userService.user | async"">{{server1.app.id}}
</div>
<div ngFor=""let user of userService.user | async"">{{server1.tol.name}}</div>

<p ngFor="let user of userService.user | async">{{server1.book.51}}</p>

..note there's plenty other things in the server1.html template and plenty other tr in the tab.html