title: How to listen to mousemove inside angular material dialog component?
body: <p>In my app Ineed to track the mouse movment all the time.</p>
  
  <p>At the app.component.ts file I have placed the following code:</p>
  
  <pre><code>ngOnInit() {
  document.addEventListener("mousemove", (e) =&gt; {
    //foo() 
   });
  })
  </code></pre>
  
  <p>Everything works as expected besides inside the dialog.</p>
  
  <p>The dialog is an <a href="https://material.angular.io/components/dialog/api" rel="nofollow noreferrer">Angular Material Dialog component</a> and the code of creating it like this:</p>
  
  <pre><code>openModal() {
      const dialogRef = this.dialog.open(ModalComponent, {
        panelClass: 'generic-dialog-container',
        data: {
          header: 'Leave session',
          content:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
          isInfo: false,
        },
      });
  
      this.dialogSub = dialogRef.componentInstance.isApprove.subscribe(
        isApprove =&gt; {
          if (isApprove) {
            this.navigateBack();
          }
        },
      );
    }
  </code></pre>
  
  <p>I have tried adding an event listener inside the modal's OnInit - didn't work, Plus I saw that when I add It at the app.component.ts to the document than the listener is added to the body element and wraps the whole app, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lxaqT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lxaqT.jpg" alt="enter image description here"></a></p>
  
  <p>While the dialog is open the Event Listener listens to mouse events at the component in the background (the component who called to open the dialog), but not in the dialog itself.</p>
  
  <p>After closing the dialog and then reopen it, the Event Listener listens to mouse events also inside the dialog as expected.</p>