Add Dynamically Query Parameters and Fragments in Angular 4

–HTML File (servers.component.html)

<div class="row">
<divclass="col-xs-12 col-sm-4">
<divclass="list-group">
<a
[routerLink]="['/servers', server.id]"
[queryParams]="{allowEdit:'1'}"
fragment="loading"
href="#"
class="list-group-item"
*ngFor="let server of servers">
{{ server.name }}
</a>
</div>
</div>
<divclass="col-xs-12 col-sm-4">
<app-edit-server></app-edit-server>
<hr>
</div>
</div>

–TS File (server.component.ts)

Yes this is nested component of servers.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from "@angular/router";

import { ServersService } from '../servers.service';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};

  constructor(private serversService: ServersService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    const id = +this.route.snapshot.params['id'];
    this.server = this.serversService.getServer(id);
    this.route.params
      .subscribe(
        (params: Params) => {
          this.server = this.serversService.getServer(+params['id']);          
        }
      )
  }

}