Support scroll spy (#74)

* working with scroll spy

* ensure scroll spy happens outside zone

* improve readme

* improve scripts

* address #47

* update package-lock

README.md

@@ -17,11 +17,11 @@ Contents:
 
 Install the package in your project. For **Angular 13** and newer:
 
-`yarn add ngx-countup` or `npm i ngx-countup`
+`npm i ngx-countup`
 
 If you are using an **older version of Angular**, use the following:
 
-`yarn add ngx-countup@7` or `npm i ngx-countup@7`
+`npm i ngx-countup@7`
 
 ---
 
@@ -43,13 +43,6 @@ Use it in your markup. Since it's a directive, it can be added to any element:
 <h1 [countUp]="345" (complete)="doSomethingOnComplete()">0</h1>
 ```
 
-#### Defer animation
-
-Bind [countUp] to some property. Leave `endVal` undefined and the animation won't start until `endVal` has a value.
-```html
-<h1 [countUp]="myEndVal" [options]="myOpts">0</h1>
-```
-
 Inputs:
 - `countUp`: number to count to
 - `options`: [CountUpOptions](https://github.com/inorganik/countUp.js#options) - fine-grain control over CountUp
@@ -58,11 +51,23 @@ Inputs:
 Outputs:
 - `complete`: emits when the animation completes
 
-#### Re-animate at will
+### Scroll Spy!
+
+Scroll spy means it will automatically start animating when the CountUp element scrolls into view. Enable it in the options:
 
-To re-animate the countUp when you want (maybe when some custom events take place or in setInterval for example), select the countUp and call the `animate()` function on it.
+```html
+<h1 [countUp]="myEndVal" [options]="{ enableScrollSpy: true }">0</h1>
+```
+
+### Defer animation
+
+Bind [countUp] to some property. Leave `myEndVal` undefined and the animation won't start until `myEndVal` has a value.
+```html
+<h1 [countUp]="myEndVal" [options]="myOpts">0</h1>
+```
+### Re-animate
 
-Add a template ref variable to the markup (with #)
+To re-animate CountUp programmatically, add a template ref variable to the markup (with #):
 
 ```html
 <h1 #countUp [countUp]="myEndVal" [options]="myOpts">0</h1>
@@ -80,7 +85,7 @@ Finally, call the animate function where need be.
   this.countUp.animate();
 ```
 
-Remember to do this inside `ngAfterViewInit()` if you are using something like setInterval on component load.
+Remember to do this inside `ngAfterViewInit()` to do something on component load.
 
 ## Angular Universal
 
@@ -123,15 +128,15 @@ And make sure you add this under `compilerOptions` in your root tsconfig.json:
 Before you make a pull request, please follow these instructions:
 
 1. Make your edits to `./projects/count-up/src/lib/count-up.directive.ts`.
-1. Run `ng s` and test your changes in the demo app.
+1. Run `npm start` and test your changes in the demo app.
 
 Publishing (you don't need to do this, it&rsquo;s for my own reference):
 
 1. Increment the version number if necessary (and `install-tarball` script).
 1. Commit changes.
-1. Run `yarn package:countup` which builds and packs a tarball.
-1. Install the tarball in the test app: `yarn install-tarball`.
+1. Run `npm run package:countup` which builds and packs a tarball.
+1. Install the tarball in the test app: `npm run install-tarball`.
 1. Make app.module import from newly installed package.
-1. Run the test app with AOT compiler and make sure the demo works: `ng serve --prod`.
+1. Run the test app with AOT compiler and make sure the demo works: `npm run serve:prod`.
 1. Run `npm publish dist/count-up`
 1. Discard changes.