How to Disable Browser Refresh Button in Angular?

By Hardik Savani | May 23, 2020 | Category : Angular

In this example, you will learn how to disable refresh button of browser using angular. This article goes in detailed on angular prevent browser refresh. i would like to share with you disable f5 in angular. i would like to show you angular disable browser refresh button. follow bellow step for how to stop page refresh in angular.

Here, i will give you simple example of disable f5 and browser refresh function in angular application. we will use window keyup and window keydown event to prevent browser page refresh in angular app.

You can easily prevent browser refresh in angular 7, angular 8, angular 8 and angular 9 application.


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


selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]


export class AppComponent implements OnInit {

name = 'Angular';


window.addEventListener("keyup", disableF5);

window.addEventListener("keydown", disableF5);

function disableF5(e) {

if ((e.which || e.keyCode) == 116) e.preventDefault();




Now you can run and check it.

I hope it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: