Using Query Parameters in Angular 4

–HTML File (server.component.html)

<button class="btn btn-primary" (click)="onEdit()">Edit Server</button>

–TS File (server.component.ts)

import { ActivatedRoute, Params, Router } from "@angular/router";

onEdit(){
    this.router.navigate(['edit'], {relativeTo: this.route})
}

–HTML File (edit-server.component.html)

<h4 *ngIf="!allowEdit">You're not allowed to edit!</h4>
<div *ngIf="allowEdit">
<divclass="form-group">
<labelfor="name">Server Name</label>
<input
type="text"
id="name"
class="form-control"
[(ngModel)]="serverName">
</div>
<divclass="form-group">
<labelfor="status">Server Status</label>
<select
id="status"
class="form-control"
[(ngModel)]="serverStatus">
<optionvalue="online">Online</option>
<optionvalue="offline">Offline</option>
</select>
</div>
<button
class="btn btn-primary"
(click)="onUpdateServer()">Update Server</button>
</div>

–TS File (edit-server.component.ts)

import { ActivatedRoute, Params } from "@angular/router";

this.route.queryParams
      .subscribe(
        (queryParams: Params) => {
          this.allowEdit = queryParams['allowEdit'] === '1' ? true : false;
        }
);