How to reload a page/component in Angular?

This tutorial discusses two methods for achieving reload/refresh in an angular framework. One is to use window.reload to reload the entire page, and the other is to use the onSameUrlNavigation-reload refresh component with an angle router.

Sometimes, As a developer, you need to write a logic to reload a component or a page for the below cases.

• Refresh a component on a button click
• Reload a component data on the delete operations on Grid

In Angular, page navigation can be done with or without the angular router module.

Let’s discuss how to reload or refresh components in Angular in multiple ways.

#Refresh angular component with windows.location.reload

In Angular, Page can be reloaded with windows.location reload

The following is an example of reloading a page with a button click.

In Angular HTML component - app.component.html

Added button in template and button click event handler, you can check how to add button click in Angular

<div>
  <p>Angular Button Click Event Example</p>
  <button (click)="reloadCurrentPage()">Reload Page</button>
  <h2>{{msg}}</h2>
</div>

In the typescript component - app.component.ts

• Write a function - reloadCurrentPage
• As the window is a global object which can be reused directly in Angular components.
• window.location.reload() loads current page

 reloadCurrentPage() {
    window.location.reload();
   }

Moving from one page to another in a legacy web application reloads the page and its content. Page refresh, on the other hand, reloads the whole page. Window.location.reload can be used to accomplish this. This is the same as a user refreshing their browser.

We have a single page wrapped with multiple components in single-page applications, and when the user navigates to another page, it only loads the components needed for that page. When a user operates, such as clicking a button, only that component is loaded instead of all the components loading on the page.

window.reload is not a suggested method for reloading the entire page in a single-page application like Angular, so this approach is not ideal for single-page applications.

Let’s take a look at how we can use an Angular router module to reload a component.

#reload the component with the angular router

First, we’ll install the angular router module with ng CLI commands, then we’ll configure router module changes, which will not be covered as part of this post.

The app-routing.module.ts file needs to be configured.

onSameUrlNavigation:reload attribute must be added to the app-routing.module.ts file. these files provide router configuration on how to configure global routing changes.

import { RouterModule } from "@angular/router";
import { NgModule } from "@angular/core";
import { DashboardComponent } from "./dashboard/dashboard.component";
import { ProfileComponent } from "./profile/profile.component";

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(
      [{ path: "dashboard", component: DashboardComponent }],
      { onSameUrlNavigation: "reload" },
    ),
  ],
  exports: [RouterModule],
  providers: [],
})
export class AppRoutingModule {}

In the HTML template,

The dashboard component has been defined with

• Button added to the input form with a click event handler
• when a button is clicked, the event bounded function is called, and this component is reloaded.

<p>
  <button (click)="refreshComponent()">Refresh Dashboard component</button>
</p>

IN Typescript component

Dashboard component typescript has been defined.

• Inject router objects into the constructor
• function is defined, and reload current component using this.router.url

import { Component } from '@angular/core';
import {Router, NavigationEnd,ActivatedRoute} from '@angular/router';
@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
    constructor(private router: Router, private activatedRoute: ActivatedRoute) {
  }
  ngOnInit() {
  }

  refreshComponent(){
     this.router.navigate([this.router.url])
  }

}

In Angular, This is how we can reload a component with router changes.

#Wrap up

In this article, two approaches are discussed: the first uses window.location.reload to reload the entire page on the browser, and the second uses an angular router module to reload components on a page.