title: How to get mouseup outside of the component in Angular 2
body: <p>I have a <strong>abc</strong> component (part of the page). It has an event mouseup.</p>
  
  <pre><code>@Component({
      selector: 'abc-component'
  })
  @View({
      &lt;div (mousedown)="mouseDown()" (mouseup)="mouseUp()"&gt;&lt;/div&gt;
  })
  export class ScheduleComponent {
      mouseDown(){
          //doSomthing
      }
      mouseUp(){}
  }
  </code></pre>
  
  <p>But the mouseup event can only trigger when the mouse inside of the <code>&lt;div&gt;</code>. How can I trigger the event even outside of the <code>&lt;div&gt;</code>?</p>
  
  <p>Do I have to move <code>(mouseup)="mouseUp()"</code> to <strong>app.ts</strong> and then use something like <code>@Output</code> or <code>service</code> to let <strong>app.ts</strong> know? Is there any other way?</p>
  
  <p>Thanks</p>