title: Close/Hide a dialog when area outside of dialog is clicked
body: <p>I have an Angular app that has a pop-up dialog where a user can enter some information. I would like to have this dialog close or become hidden when any area in the application, other than the pop-up dialog, is clicked. This way the user can enter data as needed and only when the click outside of the pop-up dialog will it close.</p>
  
  <p>I could use the <code>(mousleave)</code> event but I only want the pop-up dialog to be hidden when the user clicks somewhere in the main application (other than the pop-up dialog). In the image below that would mean anywhere in the blue area.</p>
  
  <p><a href="https://i.stack.imgur.com/9jbxH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9jbxH.png" alt="example layout of application"></a></p>
  
  <p>UPDATE: The biggesr difficulty for me is figuring out how to capture the click event in the main application (blue area) only.</p>