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 entire page, and the other is to use onSameUrlNavigation-reload refresh component with an angle router.

Some times, As a developer, you need to write a logic to reload a component or a page for a below cases

  • Refresh a component on a button click
  • Reload a component data on delete

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

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

refresh with windows.location.reload

In Angular also Page can be reload with windows.location reload

Following is an example for reloading an page with 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 typescript component - app.component.ts

  • Write a function - reloadCurrentPage
  • As window is an 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 performs an operation, 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 component with 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 this post.

In app-routing.module.ts file, needs to be configured

onSameUrlNavigation:reload attribute must be added to app-routing.module.ts file. these file 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,

Dashboard component has been defined with

  • a Button added to input form with click event handler
  • when a button is clicked, event bounded function is called, and the 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 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 browser, and the second uses angular router module to reload components in an page.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.