title: Target iterated fa-icon row in table - Angular , primeNg
body: <p>I have a nested table made using primeNg. Each row denotes a task. Every row has a <code>start fa-icon</code> which starts the task and if a particular task is started, the start button gets replaced by a <code>stop fa-icon</code>, incase any user wants to stop the on-going task.</p>
  <p><a href="https://i.stack.imgur.com/VopSi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VopSi.png" alt="enter image description here" /></a></p>
  <p>The task are nested (Note the expand-arrows to the left of rows). With my current code, whenever I click on <code>start fa-icon</code>, all the fa-icons in the table gets 'started'. I need to specifycally grab the play fa-icon of the row where the task is initiated and replace that exact play fa-icon with <code>stop fa-icon</code>.</p>
  <p>I'm replacing start fa-icon with stop fa-icon using <code>*ngIf</code> and <code>Boolean</code> variables.</p>
  <p><strong>.ts:</strong></p>
  <pre><code>  playTask:boolean = true;
    stopTask:boolean = false;
  
    playClicked(array , i , j, event:any){
     this.playTask = false;
     this.stopTask = true;
  
     var target = event.target || event.srcElement || event.currentTarget;
     var idAttr = target.attributes.id
     console.log( &quot;id: &quot;, idAttr);
    }
   
    stopClicked(array , i , j, event:any){
     this.playTask = true;
     this.stopTask = false;
    }
  </code></pre>
  <p><strong>html:</strong></p>
  <pre><code>&lt;p-table id=&quot;main-table&quot; [value]=&quot;tasks&quot; dataKey=&quot;col1&quot;&gt;
          &lt;ng-template pTemplate=&quot;header&quot;&gt;
              &lt;tr&gt;
                      &lt;th&gt;&lt;/th&gt;
                      &lt;th&gt;Col 1 &lt;fa-icon [icon]=&quot;faChevronUp&quot;&gt;&lt;/fa-icon&gt;&lt;fa-icon [icon]=&quot;faChevronDown&quot;&gt;&lt;/fa-icon&gt;&lt;/th&gt;
                      &lt;th&gt;Col 2 &lt;fa-icon [icon]=&quot;faChevronUp&quot;&gt;&lt;/fa-icon&gt;&lt;fa-icon [icon]=&quot;faChevronDown&quot;&gt;&lt;/fa-icon&gt;&lt;/th&gt;
                      &lt;th&gt;Col 3 &lt;fa-icon [icon]=&quot;faChevronUp&quot;&gt;&lt;/fa-icon&gt;&lt;fa-icon [icon]=&quot;faChevronDown&quot;&gt;&lt;/fa-icon&gt;&lt;/th&gt;
                      &lt;th&gt;Col 4 &lt;fa-icon [icon]=&quot;faChevronUp&quot;&gt;&lt;/fa-icon&gt;&lt;fa-icon [icon]=&quot;faChevronDown&quot;&gt;&lt;/fa-icon&gt;&lt;/th&gt;
                      &lt;th&gt;Col 5 &lt;fa-icon [icon]=&quot;faChevronUp&quot;&gt;&lt;/fa-icon&gt;&lt;fa-icon [icon]=&quot;faChevronDown&quot;&gt;&lt;/fa-icon&gt;&lt;/th&gt;
                      &lt;th&gt;Col 6&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate=&quot;body&quot;  let-i=&quot;rowIndex&quot; let-parentTasks let-expanded=&quot;expanded&quot; &gt;
              &lt;tr *ngFor=&quot;let parentTasks of tasks&quot;&gt;
                      &lt;td&gt;
                          &lt;button type=&quot;button&quot; pButton pRipple [pRowToggler]=&quot;parentTasks&quot;  [icon]=&quot;expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-up'&quot;&gt;&lt;/button&gt;
                      &lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row1}}&lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row2}}&lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row3}}&lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row4}}&lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row5}}&lt;/td&gt;
                      &lt;td&gt;{{parentTasks.row6}}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;fa-icon *ngIf=&quot;playTask&quot; [icon]=&quot;faPlayCircle&quot;&gt;&lt;/fa-icon&gt;
                      &lt;fa-icon *ngIf=&quot;stopTask&quot; [icon]=&quot;faStopCircle&quot;&gt;&lt;/fa-icon&gt;
                      &lt;fa-icon [icon]=&quot;faCommentDots&quot;&gt;&lt;/fa-icon&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template pTemplate=&quot;rowexpansion&quot;  let-parentTasks let-i=&quot;rowIndex&quot;&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class=&quot;expandedRow&quot;&gt;
                          &lt;p-table [value]=&quot;parentTasks.appointments&quot; dataKey=&quot;row1&quot;&gt;
                              &lt;ng-template pTemplate=&quot;body&quot; let-childTasks let-j=&quot;rowIndex&quot;  let-childTasks.viewDetails=&quot;false&quot;&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;
                                          &lt;i (click)=&quot;childTasks.viewDetails = !childTasks.viewDetails&quot; [ngClass]=&quot;childTasks.viewDetails ? 'pi pi-chevron-down' : 'pi pi-chevron-up'&quot;&gt;&lt;/i&gt;
                                      &lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row1}}&lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row2}}&lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row3}}&lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row4}}&lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row5}}&lt;/td&gt;
                                      &lt;td&gt;{{childTasks.row6}}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;fa-icon *ngIf=&quot;playTask&quot; (click)=&quot;playClicked(childTasks, i, j , $event)&quot; id=&quot;{{'play'}}&quot; [icon]=&quot;faPlayCircle&quot;&gt;&lt;/fa-icon&gt;
                                          &lt;fa-icon *ngIf=&quot;stopTask&quot; (click)=&quot;stopClicked(childTasks, i, j, $event)&quot; id=&quot;{{'pause'}}&quot; [icon]=&quot;faStopCircle&quot;&gt;&lt;/fa-icon&gt;
                                          &lt;fa-icon [icon]=&quot;faCommentDots&quot;&gt;&lt;/fa-icon&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/ng-template&gt;
                          &lt;/p-table&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
      &lt;/p-table&gt;
  </code></pre>
  <p>I have tried using $event for getting any unique ID of that row but it always returns as empty. Note: View childTasks for the (click) event.</p>