# ng-in-viewport

[![npm license][npm-badge-license]][npm-badge-url]
[![npm version][npm-badge-version]][npm-badge-url]
[![npm monthly downloads][npm-badge-downloads]][npm-badge-url]
[![code coverage][codecov-badge]][codecov-badge-url]

> Allows us to check if an element is within the browsers visual viewport

- 🤓 Learn about it on the [Docs Site][lib-docs]
- 🚀 See it in action on the [Examples Site][example-app]
- 🎮 Play with it on [Stackblitz][example-app-embed]

## License 📝

[MIT](https://github.com/k3nsei/ng-in-viewport/blob/stable/LICENSE)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/k3nsei"><img src="https://avatars2.githubusercontent.com/u/190422?v=4?s=100" width="100px;" alt="Piotr Stępniewski"/><br /><sub><b>Piotr Stępniewski</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/commits?author=k3nsei" title="Code">💻</a> <a href="https://github.com/k3nsei/ng-in-viewport/commits?author=k3nsei" title="Documentation">📖</a> <a href="https://github.com/k3nsei/ng-in-viewport/pulls?q=is%3Apr+reviewed-by%3Ak3nsei" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/k3nsei/ng-in-viewport/commits?author=k3nsei" title="Tests">⚠️</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Bengejd"><img src="https://avatars3.githubusercontent.com/u/11723093?v=4?s=100" width="100px;" alt="Jordan Benge"/><br /><sub><b>Jordan Benge</b></sub></a><br /><a href="#blog-Bengejd" title="Blogposts">📝</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/numerized"><img src="https://avatars1.githubusercontent.com/u/166829?v=4?s=100" width="100px;" alt="Kévin Perrée"/><br /><sub><b>Kévin Perrée</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Anumerized" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/OzoTek"><img src="https://avatars3.githubusercontent.com/u/6436053?v=4?s=100" width="100px;" alt="Alexandre Couret"/><br /><sub><b>Alexandre Couret</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3AOzoTek" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/anwar-elmawardy"><img src="https://avatars0.githubusercontent.com/u/23740710?v=4?s=100" width="100px;" alt="anwar-elmawardy"/><br /><sub><b>anwar-elmawardy</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Aanwar-elmawardy" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jwillebrands"><img src="https://avatars0.githubusercontent.com/u/8925?v=4?s=100" width="100px;" alt="Jan-Willem Willebrands"/><br /><sub><b>Jan-Willem Willebrands</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Ajwillebrands" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/CSchulz"><img src="https://avatars2.githubusercontent.com/u/1520593?v=4?s=100" width="100px;" alt="CSchulz "/><br /><sub><b>CSchulz </b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3ACSchulz" title="Bug reports">🐛</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Silvest89"><img src="https://avatars2.githubusercontent.com/u/2388338?v=4?s=100" width="100px;" alt="Johnnie Ho"/><br /><sub><b>Johnnie Ho</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3ASilvest89" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pasevin"><img src="https://avatars2.githubusercontent.com/u/1058469?v=4?s=100" width="100px;" alt="Aleksandr Pasevin"/><br /><sub><b>Aleksandr Pasevin</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/commits?author=pasevin" title="Code">💻</a> <a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Apasevin" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/wkurniawan07"><img src="https://avatars2.githubusercontent.com/u/7261051?v=4?s=100" width="100px;" alt="Wilson Kurniawan"/><br /><sub><b>Wilson Kurniawan</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Awkurniawan07" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/basters"><img src="https://avatars0.githubusercontent.com/u/17099950?v=4?s=100" width="100px;" alt="Eugene"/><br /><sub><b>Eugene</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/commits?author=basters" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/samizarraa"><img src="https://avatars3.githubusercontent.com/u/20872538?v=4?s=100" width="100px;" alt="Sami Zarraa"/><br /><sub><b>Sami Zarraa</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Asamizarraa" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Jonnyprof"><img src="https://avatars.githubusercontent.com/u/9952131?v=4?s=100" width="100px;" alt="JordiJS"/><br /><sub><b>JordiJS</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3AJonnyprof" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mpschaeuble"><img src="https://avatars.githubusercontent.com/u/18322360?v=4?s=100" width="100px;" alt="mpschaeuble"/><br /><sub><b>mpschaeuble</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Ampschaeuble" title="Bug reports">🐛</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/karptonite"><img src="https://avatars.githubusercontent.com/u/132278?v=4?s=100" width="100px;" alt="Daniel Karp"/><br /><sub><b>Daniel Karp</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Akarptonite" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tinesoft"><img src="https://avatars.githubusercontent.com/u/4053092?v=4?s=100" width="100px;" alt="Tine Kondo"/><br /><sub><b>Tine Kondo</b></sub></a><br /><a href="#ideas-tinesoft" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/k3nsei/ng-in-viewport/pulls?q=is%3Apr+reviewed-by%3Atinesoft" title="Reviewed Pull Requests">👀</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors][all-contributors-url] specification. Contributions of any kind welcome!

<!-- LINKS-DEFINITIONS-LIST:START -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->

[npm-badge-version]: https://img.shields.io/npm/v/ng-in-viewport?style=flat-square
[npm-badge-license]: https://img.shields.io/npm/l/ng-in-viewport?style=flat-square
[npm-badge-downloads]: https://img.shields.io/npm/dm/ng-in-viewport?style=flat-square
[npm-badge-url]: https://www.npmjs.com/package/ng-in-viewport
[codecov-badge]: https://img.shields.io/codecov/c/github/k3nsei/ng-in-viewport/develop?logo=codecov&style=flat-square
[codecov-badge-url]: https://codecov.io/gh/k3nsei/ng-in-viewport
[lib-docs]: https://k3nsei.gitbook.io/ng-in-viewport/
[example-app]: https://ng-in-viewport-k3nsei.vercel.app/
[example-app-embed]: https://stackblitz.com/edit/ng-in-viewport-example?embed=1&file=src/main.ts
[all-contributors-url]: https://github.com/all-contributors/all-contributors

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- LINKS-DEFINITIONS-LIST:END -->