Router.navigate vs window.location.href

Asked on March 05, 2024

In my Angular routing application, I need to navigate route using Router.navigate. I need to understand what if I use window.location.href.

Replied on March 05, 2024
1.  In Angular, Router.navigate loads a route whereas window.location.href loads a URL. In loading URL, all components, root components and child components, are loaded freshly. For every hit of URL by window.location.href, application will load completely fresh.

2.  Router.navigate navigates to new route by loading only the child components and not the complete application. It means when we navigate to child route within a parent route, then only child components will be loaded. Parent components are already loaded, hence it will not load again for that route.

3. In JavaScript, Window.location returns Location object that represents the URL. Location object has the properties as href, host, hostname, port etc. The href to location object can be assigned as below

window.location.href = http://localhost:4200/country/countryList/detail/1

The page will redirect to specified URL.

4. Use window.location.href to navigate from one application to another application.

onButtonClick() {
    window.location.href = "http://localhost:4200/country";

5. Use Router.navigate, to navigate within an application.

constructor(private router: Router) { }
onButtonClick() {

Write Answer

©2024 | Privacy Policy | Contact Us