Using Relative Paths in Programmatic Navigation in Angular 4

On click button change navigation with Relative Path in angular 4.

–HTML File

<button (click)="onNewRecipe()">Submit</button>

–TS File

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

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

export class RecipeListComponent implements OnInit, OnDestroy {
  recipes: Recipe[];
  subscription: Subscription;

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

  ngOnInit() {
  }

  onNewRecipe(){
    this.router.navigate(['new'], { relativeTo: this.route});
  }
}

This will be change your page url current to new.