title: how to show and maintain data status only once in angular table row
body: <p>I have a table where i am showing list of items in table row. I am maintaining item availability by showing red and green circles. That is when item is available it shows in green circle when its not-available it shows red colour. Whenever i am showing item availability it keeps on changing its value. How can i solve this???</p>
  <p><em>component.html</em></p>
  <pre><code>   &lt;table class=&quot;table tabs links&quot;&gt;
     &lt;thead&gt;
     &lt;tr&gt;
     &lt;th&gt;S. No.&lt;/th&gt;
     &lt;th&gt;Analytics Name&lt;/th&gt;
     &lt;th&gt;&lt;/th&gt;
     &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
     &lt;tr *ngFor=&quot; let item of itemArray[0] | paginate : {itemsPerPage: 
     itemsPerPage, currentPage: currentPage, totalItems: totalItems}; 
        let i = index &quot;&gt;
         &lt;td&gt;{{ (currentPage - 1) * itemsPerPage + i + 1 }}&lt;/td&gt;
          &lt;td&gt;{{ item.ItemName }}&lt;/td&gt;
          &lt;td&gt;&lt;i [ngClass]=&quot;itemStateCssClass(item.ItemId)&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; 
           &lt;/td&gt;
           &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  <p><em>component.ts</em> file</p>
  <pre><code>    itemStateCssClass(itemId) {
   this.service.itemIdForStatus(itemId).subscribe((res: any) =&gt; {
    let itemState;
    let classes;
    let status = res.payload;
    itemState = status.Status;
    switch (itemState) {
      case &quot;notAvailable&quot;:
        classes = &quot;fa fa-circle  redColor&quot;;
        break;
      case &quot;available&quot;:
        classes = &quot;fa fa-circle greenColor&quot;;
        break;
      default:
        break;
    }
    this.statusUpdate = classes
    return classes;
  });
  
  return this.statusUpdate;
  }
  </code></pre>
  <p><em>component.scss</em></p>
  <pre><code>.redColor{
   color: #e00c0c;
   }
  .greenColor{
  color: forestgreen;
  }
  </code></pre>