How to Reload Page in Angular 2

1. Pagination Logic in Angular 2
2. Install the Dependencies for Page Reloading in Angular
3. Use window.location.reload() to Reload Current Page in Angular

This article will learn how to reload a page in Angular 2. We will use the Angular CLI to create a new project and install the dependencies.

Most importantly, we will use the window.location.reload() method for page reloading. Finally, we will make buttons in HTML so that we can experience the concept of page reloading in Angular 2.

Pagination Logic in Angular 2

Pagination is a technique that is used to divide content into pages. Pagination logic is deciding which content should be on which page.

It can be done by using a variety of methods, such as:

1. Page numbers
2. Page size
3. Page count
4. Content-type

The pagination logic in Angular 2 is based on the concept of paging.

Install the Dependencies for Page Reloading in Angular

Angular is a client-side MVC (Model View Controller) framework that offers declarative, two-way data binding that helps to reduce boilerplate code and provides a development platform for building mobile and desktop web applications.

Angular has many dependencies which are required for page reloading to work properly. These dependencies are RxJS, Zone.js, SystemJS, Browserify, Gulp, Karma, and Protractor.

Run npm install from the command line to install all essential npm packages according to your needs (where the package.json is located). We don’t use special dependencies; thus, we won’t specify them here.

Use window.location.reload() to Reload Current Page in Angular

The best method to reload the page in Angular is window.location.reload().

Window.location.reload() is a JavaScript API that reloads the current page in the browser, which can be invoked by calling window.location.reload().

This API is used to refresh or update an HTML document without reloading the whole page. It is helpful for web apps with heavy content and dynamic content like news sites or blogs where users might want to see updates without refreshing their browser every time they visit the site on their mobile device (e-mail clients, social media sites).

It is also useful for loading updated data from the server or refreshing the page content without closing it and opening it again. It can also fix some issues with loading external resources or scripts.

Moreover, it is a lesser-known feature of Angular because most developers are unaware of it. Although, it is very useful when you need to load content dynamically into a fixed-length list or table with pagination enabled on the viewport size.

Click here to learn more.

Let’s discuss an example to understand how to use window.location.reload() better.

The app.component.ts code is given below.

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  Home(): void {
    window.location.reload();
}
About(): void {
  window.location.reload();
}
Contact(): void {
  window.location.reload();
}
Services(): void {
  window.location.reload();
}
Goods(): void {
  window.location.reload();
}
}

The app.component.html code is given below.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h3>Example of Page Reload in Angular 2</h3>
<h6>Press the given below buttons to check the live demonstration of page reloading in Angular</h6>
<div> <button (click)="Home()">Home</button></div>
<br>
<br>
<div> <button (click)="About()">About</button> </div>
<br>
<br>
<div> <button (click)="Contact()">Contact</button> </div>
<br>
<br>
<div> <button (click)="Services()">Services</button> </div>
<br>
<br>
<div> <button (click)="Goods()">Goods</button> </div>

In this example, we created three pages refresh, home, and about; with the help of the reloading mentioned above, we gave them the functionality to reload. Lastly, we have added a Bootstrap CSS style sheet to make it fancy.

You can also use this same method to create multiple pages like Google Pagination, where you can reload one page without moving towards the other pages. Moreover, this is a very lightweight method use it.

Click here to check the live demonstration of the code above.