How to Find the Browser Tab is Focused or Not using HostListener in Angular 2+

Question

I want the Browser Tab Focus and Blur Event using HostListener.

Answer 1

First Import HostListener in your Component

import { HostListener } from '@angular/core';

Then put this code to get Tab Focus and Blur Event

export class AppComponent { 

   @HostListener('window:focus', ['$event'])
   onFocus(event: FocusEvent): void {

       // Do something      

   }

   @HostListener('window:blur', ['$event'])
   onBlur(event: FocusEvent): void {

      // Do something

   }

  ........
  .....
}