title: Listen to element visibility in Angular 2
body: <p>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 with <code>hidden-sm-up</code> and I need to trigger a function each time it is hidden or displayed.</p>
  
  <pre><code>div.hidden-sm-up
     input.form-control(myDirective, type='number')
  </code></pre>
  
  <p>and in my directive:</p>
  
  <pre><code>@Directive({
      selector: '[myDirective]'
  })
  
  export class myDirective {
      constructor(private element: ElementRef, private renderer: Renderer){
  
      }
  
      ngAfterViewInit(): void{
          // listen to visibility change here
      }
  }
  </code></pre>