title: Make @HostBinding and @HostListener conditional in a Directive or Component for Angular2
body: <p>I have a directive that accepts an event:</p>
  
  <p><code>&lt;td calendarEvent [event]=event&gt;&lt;td&gt;</code></p>
  
  <p>Inside the directive, I have <code>HostBinding</code>s for adding classes based on the event and <code>HostListener</code>s for listening for <code>mouseenter</code> and <code>mouseleave</code> events. For example: </p>
  
  <pre><code>@HostBinding('class.all-day') get eventIsAllDay() {
    if (this.event) return this.event.is_all_day;
  }
  </code></pre>
  
  <p>A number of <code>&lt;td&gt;</code>s will have <code>undefined</code> for the <code>[event]</code> input. Is there a way for <code>HostBinding</code> and <code>HostListener</code> to be added based upon a condition? On every change detection, it has to run all the bindings and listeners for every single <code>&lt;td&gt;</code> tag, even those that don't have events. Perhaps the computing power needed is negligible, but every little bit helps I'm sure, especially with mobile devices.</p>