title: Change class name in ngFor based on Viewport - expressionChangedAfterItHasBeenCheckedError
body: <p>On the left, there's a navigation list with titles of categories, and on the right, I have the categories listed. The titles in the list could get &quot;highlighted&quot; based on the category shown on the right.<br />
  1- The user may click on a category title from the list to scroll to it, and now that clicked title would get &quot;highlighted&quot;.<br />
  2- The Title could get &quot;highlighted&quot; if the user scrolls into its corresponding category section.<br />
  &quot;Highlighting&quot; category titles is simply done by assigning <code>faq__category-m-heading w--current</code> to its class. Non-highlighted titles have the <code>faq__category-m-heading</code> class.</p>
  <p><strong>HTML</strong></p>
  <pre><code>//Left
  &lt;div class=&quot;faq__category-menu&quot;&gt;
  
          &lt;a *ngFor=&quot;let category of DISPLAYED_CATEGORIES&quot; (click)=&quot;scrollToElement(category.FAQ_CATEGORY_ID)&quot;
             [ngClass]=&quot;getClass(category.FAQ_CATEGORY_ID)&quot;&gt;{{category.FAQ_CATEGORY_TITLE}}&lt;/a&gt;
  
  &lt;/div&gt;
  
  //Right
  &lt;div *ngFor=&quot;let category of DISPLAYED_CATEGORIES&quot; id=&quot;{{category.FAQ_CATEGORY_ID}}&quot;
          class=&quot;faq__category-wrapper food&quot;&gt;
          &lt;h2 class=&quot;faq__category-heading&quot;&gt;{{category.FAQ_CATEGORY_TITLE}}&lt;/h2&gt;
  //nonn relevant code section here
  &lt;/div&gt;
  </code></pre>
  <p><strong>TypeScript</strong></p>
  <pre><code> scrollToElement($elementId): void {
      this.currentID = $elementId;  //I was trying another method here
      let el = document.getElementById($elementId);
      el.scrollIntoView({ behavior: &quot;smooth&quot;, block: &quot;start&quot;, inline: &quot;nearest&quot; });
    } 
  
  isInViewport(elem) {
      var bounding = elem.getBoundingClientRect();
      return (
        bounding.top &gt;= 0 &amp;&amp;
        bounding.left &gt;= 0 &amp;&amp;
        bounding.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
        bounding.right &lt;= (window.innerWidth || document.documentElement.clientWidth)
      );
    };
  
  getClass(id) {
      let el = document.getElementById(id);
      if (el == undefined || el == null)
        return 'faq__category-m-heading';
      else {
        if (this.isInViewport(el)) {
          return 'faq__category-m-heading w--current';
        }
        else
          return 'faq__category-m-heading';
      }
  }
  
  </code></pre>
  <p>**scrollToElement function scrolls to the category depending on the id passed by the parameter (thus now it's in the viewport).<br />
  **isInViewport function returns true if category is currently in viewport (first time I use this I don't know if it could be enhanced).<br />
  **getClass dynamically changes classes based on if they're in the viewport or not.</p>
  <p>This code &quot;apparently&quot; works but throws expressionChangedAfterItHasBeenCheckedError.<br />
  Side question: the function getClass() gets called from each object around 3 times... why is this happening?</p>
  <p>Thank you for any help in advance, I tried searching for similar cases but couldn't find any solution.</p>