Make @HostBinding and @HostListener conditional in directive or component for Angular2

Question

I have a directive that accepts an event:

<td calendarEvent [event]=event><td>

Inside the directive I have HostBindingto add classes based on events and HostListenerto listen for events mouseenterand mouseleave. For instance:

@HostBinding('class.all-day') get eventIsAllDay() {
  if (this.event) return this.event.is_all_day;
}

The number <td>will have undefinedto enter [event]. Is there a way to add HostBindingand HostListenerbased on conditions? Each time a change is detected, it should start all bindings and listeners for each tag <td>, even those that have no events. Perhaps the required processing power is negligible, but every bit helps, I'm sure, especially with mobile devices.

Answer 1

Unable to add them conditionally.

You can use a property and bind it to a property. Detecting changes with properties is more efficient than with functions or getters.

@HostBinding('class.all-day') 
eventIsAllDay:boolean = false;

set event(val) {
  this.event.is_all_day === val;
}