title: How to implement @HostListener('window:beforeunload', ['$event']) into canDeactivate guard directives?
body: <p>In my app, we have lots of components with lots of form fields. So whenever the user changes something in the form and without saving the changes if the user wants to navigate to another component he is getting a warning message using canDeactivate. However, instead of navigating to the app, if the user closes the tab then he is not getting the warning message anymore. I have resolved this issue using <code>window:beforeunload</code> inside the component like this:</p>
  <pre><code>@HostListener('window:beforeunload', ['$event'])
    public oncloseTab( event: KeyboardEvent) {
      if (this.shouldWarnForUnsaved()) {  // shouldWarnForUnsaved tells if anything changes in the form 
        return window.confirm('There is the unsaved message. Are you sure you want to close the tab?');
      }
    }
  </code></pre>
  <p>However as I said I have lots of components, so I have to do the copy-paste this above code several times in several components. I am just curious, is there any way I could achieve using <code>candeactivate</code> guard directive?  My goal is, I will implement the <code>beforeunload</code> once in the <code>candeactivate</code> guard directives so that I do not have to repeat the same code in several times.</p>
  <p>Can anybody have any clue how to do this?</p>