title: how to disable icon of particular data from table list in angular
body: <p>I have a list of data coming in table. Each data shows status of data and has play icon. I want that when someone clicks on play icon that icon becomes disable until response from api comes out. i have tried to implement it but</p>
  <p><em>my component.html code</em></p>
  <pre><code>   &lt;table class=&quot;table tabs&quot;&gt;
    &lt;thead&gt;
   &lt;tr&gt;
   &lt;th&gt;Name&lt;/th&gt;
   &lt;th&gt;Id&lt;/th&gt;
   &lt;th&gt;Status&lt;/th&gt;
   &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr *ngFor=&quot; let con of getInfo | paginate : { itemsPerPage: itemsPerPage,
    currentPage: currentPage, totalItems: totalItems }; let i = index&quot; &gt;
    &lt;td&gt;{{ con.GroupName }}&lt;/td&gt;
    &lt;td&gt;{{ con.Id }}&lt;/td&gt; 
   &lt;td&gt;{{ con.Status }}&lt;/td&gt;
     &lt;td&gt;
    &lt;i class=&quot;fa fa-play&quot; (click)=&quot;play(con.Id)&quot;&gt;&lt;/i&gt;
   &lt;/td&gt;
   &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  <p><em>my component.ts code</em></p>
  <pre><code>     play(idx: number) {
     this.service.getDataIndo(id).subscribe((res: any)=&gt;{
    this.getAnaInfo =res
     })
    }
  </code></pre>