Angular 2. How to detect if component is currently in viewport

Question

I'd like to detect if the component position. Is currently in a view port and if yes run the trigger which stats an animation on this particular component.

I can't find any "angular" way to do it.

Example app( main component) every div is a separate component of app:

<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>

So... I'd like to detect when component five is in viewport (present on a screen) and start animate that component.

Any ideas?

Thanks

Answer 1

You could use the ng-in-viewport plugin.

HTML:

<div id="five" in-viewport (inViewportAction)="action($event)">Something...</div>

Component:

action(event : any){
    if(event.value){
       //Do something here (e.g apply CSS class to start the animation)
    }
}

Check my detailed answer on a similar question here.