Run Code When You Leave Your Angular App

tldr;

We have all seen and likely used the ngOnDestroy lifecycle hook. But did you know it doesn’t fire when the browser tab is refreshed or closed or the URL is changed to a new page? What do you do if you need to do some cleanup when the entire Angular app is destroyed? It turns out to not be all that hard with the use of a @HostListener.

What’s the Problem?

I was recently working on an issue in an app that needed to be resolved by clearing a portion of the localStorage when the Angular app redirected to the authentication server. I figured it would be simple; I would just use ngOnDestroy in the main AppComponent and clear the localStorage item! But, it turns out that didn’t work. The Angular docs say this about the ngOnDestroy hook:

Called immediately before Angular destroys the directive or component.

Notice it does not say that it is called before the browser destroys the Angular app. So my first stab at solving the problem didn’t work. Luckily, I found another way that’s just as simple to solve this problem.

Using the HostListener

Depending on the amount of time you’ve used Angular, you may or may not know about the HostListener decorator. This decorator “declares a DOM event to listen for, and provides a handler method to run when that event occurs”. In other words, you use this decorator in a component to listen to DOM events and run handler functions when the event fires. This is what you can use to run certain pieces of code when the application is destroyed by the browser (by refresh, or changing to a new site, or whatever the case may be).

The two DOM events that I used to accomplish this were beforeunload and unload. The beforeunload event fires when a window is about to unload its resources. The unload event fires when the window is unloading its content and resources. Depending on your situation, either of these could work. Here is how the HostListener can be used with one of these events:

export class AppComponent implements OnInit {
  @HostListener(‘window:unload’, [ ‘$event’ ])
  unloadHandler(event) {
    // …
  }
  @HostListener(‘window:beforeunload’, [ ‘$event’ ])
   beforeUnloadHandler(event) {
     // …
   }
}

With these HostListeners, the functions underneath the decorator will be run when the event fires in the browser. Inside those functions is where you will run the cleanup code.

Conclusion

While there isn’t a lifecycle hook for the app being destroyed by the browser, a HostListener and an event to listen to will accomplish the same result. You can use this same method for any event that the browser fires.

Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!
Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:

• Expert panels and Q&A sessions with the speakers
• A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
• Hands-on workshops
• Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget

We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.
https://2022.ng-conf.org/