title: Angular 2 Event Handling and Custom Events
body: <p>I am currently working on a project which involves creating a library of components in Angular 2 for app teams to use. I recently created a modal component, but I am having some accessibility issues. Specifically, I want the modal to close when a user selects the ESC key, but not if there is an internal component such as a dropdown that should consume the ESC event. With the modal structure allowing various content to be displayed via <code>&lt;ng-content&gt;</code>, it makes the situation even more difficult because I can't guarantee what will be inside of the modal. </p>
  
  <p>Ideally I would like to find a way to see if a projected component is listening for the <code>(keydown)</code> or <code>(keyup)</code> events or even better, find a way to see if another component has already consumed or handled the event. I know that if I were writing an application instead of providing a library, I could add an attribute to the events inside of the projected components or create a custom event handler as described <a href="https://stackoverflow.com/questions/38683050/angular2-custom-events">here</a> but I unfortunately do not have those options.</p>