In Angular 9, how do you implement an onblur handler for a page?

Question

I want to set an onblur event handler in my Angular 9 app for when someone leaves the page. My page in question is mapped to a single component that has this ...

export class HotComponent implements OnInit {
  ...

  onBlur(): void {
    console.log("on blur called !!!");
  }

In the template, I set this ...

<div (blur)="onBlur()">
  <div>
    ...
  </div>
</div>

But when I navigate away from the browser window where this page is loaded and come back, I notice the onblur handler hasn't been called. What's the proper way to implement the onblur event handler for a page in Angular 9?

Answer 1

Angular has something called HostListener, you need to use it!

 /**
   * Blur
   * @param eventName 'focusout' is the key
   * @param arguments of type '$event'
   */
  @HostListener('focusout', ['$event'])
  onFocusout(event) {
    // your logic goes here
    console.log('on blur called'); // This will get printed on blur
  }

Answer 2

I suggest you look into the onbeforeunload event. The onblur event isn't really designed to support your usecase because it targets the state change of an element. What you're attempting to do is intercept a history change on the browser.

The onbeforeunload property of the WindowEventHandlers mixin is the EventHandler for processing beforeunload events. These events fire when a window is about to unload its resources. At this point, the document is still visible and the event is still cancelable.

As outlined by the other replies, you can add an event listener via Angular's @HostListener annotation:

@HostListener('window:beforeunload')
foo() {
  // Do something here
}

Answer 3

Two Issues will fix your problem. Add tabindex="0" to your DIV then handle the events below

<!-- language: html -->
// 1
<div  (blur)="onBlur()">  // tabindex="0" gets inserted by HostBinding
// recommend you use an input vs. DIV when user is entering data

the second issue is because there are two events happening as a result of your navigation you need to handle both. For firefox look here for the eventname. Once you import HostListener & HostBinding

<!-- language: typescript -->
// 2
import { Component, HostListener, HostBinding } from '@angular/core';

1. Handle the focus event both focus in and blur for exit
2. Handle the blur event as you want

---

<!-- language: typescript -->
// 3              -- you should be good :)
export class HotComponent { 

focusOutFunction() {
 console.log('focusOutFunction called');
 .. your logic here
 }

focusFunction() {
 console.log('focusFunction called');
 ..
 }

blurFunction()
 {
  console.log('blur called');
  ..
 }

   // you dont need to manually add it to HTML if you do this.
   @HostBinding('attr.tabindex') tabindex = '0';
}

---

Another option 2: if you have want to handle focusOut

  <!-- language: html -->
  <input tabindex="0" type="text" (focusout)="onFocusOutEvent($event)" />

---

  // in your component explicitly handle the event 
  onFocusOutEvent(event: any){
    console.log(event.target.value);
  }

A simple working sample with the events working for me, Please see console log below pic... it works. Can you please disable all your plugins and try.

Answer 4

onBlur and onFocus won't get applied on div directly

Anyway, to solve your issue you can just add an EventListener on visibilitychange in your app.component or any other component's constructor.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Browser tab is on blur")
  } else {
    console.log("Browser tab is on focus")
  }
});