Listen To Element Visibility In Angular 2

I'm using Bootstrap and Angular 2 (v4) for my webapp. I would like to listen to an element in a directive for visibility changes. My element has a parent that can hide its children

Solution 1:

ngDoCheck is run when change detection is run, therefore I think it's the right place if you want to monitor it instead of just get it once at component creation time:

@HostListener('window:resize')
ngDoCheck() {
  this.isVisible = this.element.nativeElement.offsetParent !== null;
}

There might be better option, like some events that are emitted somewhere, but for the general case ngDoCheck should work fine.

Solution 2:

I found nice blog regarding that. HostListener has visible event. https://netbasal.com/with-great-angular-components-comes-great-single-responsibility-5fa37c35ad20