Angular5 How to prevent page reload when url changes

Question

Let's say that I have a MainPage component (localhost:4200/mainPage) that has a button. I click on that button and Upload component renders on the same page. But when Upload component is visible, I need URL to be different (localhost:4200/mainPage/upload). But I don't want the page refresh when URL changes. How to achieve this?

Answer 1

You can do like this :

 <button class="btn btn-warning" routerLink="/mainPage/upload" skipLocationChange> Create New </button>

In this case you will be routed to the page upload..no refresh will occur