title: Angular 6: simple confirmation on page leaving
body: <p>I need to make a simple confirm window and I saw a lot of examples of how to do it with extra actions (like waiting until file uploading of form is not field). But I need just make a default confirm window with a default text (like in a pic below) to show it when the user wants to leave from the current page. And I can't completely understand what logic should I proved inside handling <code>before unload</code> event. </p>
  
  <p><img src="https://i.imgur.com/0akXZN4.png" alt="image example"></p>
  
  <p>I'm recently sorry if it a dup of some question, however, I didn't find any solution. So I have:</p>
  
  <p><strong>example.guard.ts</strong></p>
  
  <pre><code>export interface CanComponentDeactivate {
      canDeactivate: () =&gt; Observable&lt;boolean&gt; | boolean;
  }
  
  @Injectable()
  export class ExampleGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {
  
      constructor() { }
  
      canDeactivate(component: CanComponentDeactivate): boolean | Observable&lt;boolean&gt; {
          return component.canDeactivate() ?
              true :
              confirm('message'); // &lt;&lt;&lt; does confirm window should appear from here?
      }
  }
  </code></pre>
  
  <p><strong>example.component.ts</strong></p>
  
  <pre><code>export class ExampleComponent implements CanComponentDeactivate {
  
      counstructor() { }
  
      @HostListener('window:beforeunload', ['$event'])
          canDeactivate($event: any): Observable&lt;boolean&gt; | boolean {
              if (!this.canDeactivate($event)) {
                  // what should I do here?
              }
          }
  }
  </code></pre>
  
  <p>It would be wonderful if you provide a sample of code but I appreciate any kind of help.</p>