title: How do you change a class dynamically on scrolling to a specific element in Angular 8?
body: <p>I can do this easily with onMouseWheel, but it doesn't work for users who are scrolling with the keyboard (arrow keys).
  This is a demo of the functionality I want using onMouseWheel.</p>
  <pre><code>    &lt;h2  [ngClass]=&quot;{ 'scrolled-into-view' : scrolled }&quot;  (wheel)=&quot;onMouseWheel($event)&quot;&gt;
        This text should turn red when scrolled into view.
      &lt;/h2&gt;
  </code></pre>
  <pre><code>  scrolled = false;
    onMouseWheel(evt) {
      this.scrolled = true;
    }  
  </code></pre>
  <p><a href="https://angular-ivy-5hgjb5.stackblitz.io" rel="nofollow noreferrer">https://angular-ivy-5hgjb5.stackblitz.io</a></p>