Call api before page refresh angular

Question

I want to call api before user navigates to url using href or reloading the current page. Here's my code that i have used.

@HostListener('window:unload', ['$event'])
 unloadHandler(event) {
 console.log('window:unload');
 this.storeSessionVistorsCount();
}

storeSessionVistorsCount() {
    if (this.sessionTime > 0) {
      const body = {
        ip: this.ipAddress,
        space_id: this.spaceId,
        type: 'session',
        time: this.sessionTime
      };
      this.statisticService.getIpDetail(body).subscribe((res: any) => {
        console.log('success')
      }, err => {
        console.log(err);
      });
    }
  }

Api is cancelled by the browser. Can anyone help me out . Thanks.

where is `sessionTime`? and can you explain more - *Api is cancelled by the browser.* — Prashant Pimpale, Nov 21 '19 at 11:04
did u try chaning :unload to :beforeunload ? you can also try canDeactivate hook - nice article to read https://medium.com/better-programming/angular-how-keep-user-from-lost-his-data-by-accidentally-leaving-the-page-before-submit-4eeb74420f0d — Damian Martyniuk, Nov 21 '19 at 11:06
check [resolvers](https://codeburst.io/understanding-resolvers-in-angular-736e9db71267) in angular — Eldar, Nov 21 '19 at 11:07
Yes i tried using beforeunload also but browser cancels api call. — user6795317, Nov 21 '19 at 11:16

score 1 · Answer 1 · answered Nov 21 '19 at 11:09

1

You can call functions on specific lifecycle hooks in Angular. So like when the user leaves the application with a hard link <a href="...">...</a> or refresh you can take the onDestory() hook

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnDestroy {
  ngOnDestroy() {
    // Make your api call
  }
}

Here you can get additional information about life cycle hooks in the offical documentation: https://angular.io/guide/lifecycle-hooks

answered Nov 21 '19 at 11:09

Ling Vu

4,740
5
24
45

It does not detect ngOnDestroy on hard reload or from href tag. – user6795317 Nov 21 '19 at 11:17
Maybe this helps: https://stackoverflow.com/questions/36763141/is-there-any-lifecycle-hook-like-window-onbeforeunload-in-angular2 – Ling Vu Nov 21 '19 at 15:35

score 0 · Answer 2 · answered Nov 21 '19 at 11:35

0

You can use a resolver in router to resolve data before the component loads.

Read more at: https://angular.io/api/router/Resolve

answered Nov 21 '19 at 11:35

Muhammad Kamran

978
6
10

1

I dont want before component loads i want it on hard reload or clicking on href tag. – user6795317 Nov 21 '19 at 11:45
well only your index.html would run on a hard reload. So you could add a script in there if you want. – Muhammad Kamran Nov 21 '19 at 11:53
But i want some api to call where i can track time of visitor where he / she has visited in one page. Lets say tracking session. – user6795317 Nov 21 '19 at 12:07

Call api before page refresh angular

2 Answers2