detect browser refresh in angular project?

Question

I want to detect when page is refresh using router in my single page application (Angular project)

Is there any alternate way?

Answer 1

In the component.ts

import { Subscription } from 'rxjs';

export let browserRefresh = false;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnDestroy {

  subscription: Subscription;

  constructor(private router: Router) {
    this.subscription = router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          browserRefresh = !router.navigated;
        }
    });
  }

in the page you need

import { browserRefresh } from '../app.component';

....

  ngOnInit() {
    this.browserRefresh = browserRefresh;
    console.log('refreshed?:', browserRefresh);
  }

See working example here https://stackblitz.com/edit/refreshangular?file=src%2Fapp%2Fpage-a%2Fpage-a.component.ts

Click on page A & Page B & refresh to see the difference

Answer 2

try this

  this.router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      if (
        event.id === 1 &&
        event.url === event.urlAfterRedirects 
      ) {
       ..... // here your code when page is refresh
      }
    })

You will need to import

import { filter } from 'rxjs/operators'
import { Router  } from '@angular/router';

Answer 3

An Angular application is a single page application, and in the context of a single page application the full app is loaded once, and data or screens are refreshed as the user uses your application.

A browser refresh is the equivalent of shutting down your application and launching it again. There is no default way to respond to this inside your Angular application.

You might be able to mock something up using onBeforeUnload() to log that the application was reloaded; and then check that log in your application's initialization routine to perform some special action.