In Angular2, how can I hide a component based on an event received in that component?

Question

I have the following code:

<my-component (show)="$event"></my-component>

The $event property is a boolean which I want to use to hide/show this component.

Is it possible to not render <my-component> without writing new code in the class? That is, I would preferably just have the logic in the template and not in the class itself.

Answer 1

Just listen to an event and set the hidden property depending on the event:

class MyComponent {
  @HostBinding('hidden')
  isHidden:boolean = false;

  @HostListener('someevent')
  someEventHandler(event) {
    this.isHidden = event;
  }
}