Dynamically change components but have same url displayed on address bar

Question

I have a router outlet that would toggle between various components like table, chart, list etc.

I have a requirement to not show url change on the address bar.

Suppose if table path is http://mysite/table and chart is http://mysite/chart, it should always show http://mysite without displaying relative path change.

I think it doesn't make sense to have same url but wants to use a router outlet. Looking for any ideas to achieve that using angular to change components. (even without router is okay)

Answer 1

Use skipLocationChange as described here https://angular.io/api/router/NavigationExtras