title: Apply CSS style dynamically in row Angular Material Table, based on click method
body: <p>thanks for your support. Currently I'm struggling with some issues. So, I'm trying to make a dynamically rows into Angular Mat Table. Making a toogle effect between labels and inputs. My goal is to update and delete data, from specific row.</p>
  <p>I'm almost done, but when I click the button, all the rows are affected. I tried some logic with index, I  also used &quot;data attribute&quot; ([attr.data-example]), &amp; I tried with ng-class. Let me explain with images, also I'll attach my code.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;example-table-container&quot;&gt;
  
        &lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8 tbl-header&quot;&gt;
          &lt;!-- Position Column --&gt;
          &lt;ng-container matColumnDef=&quot;usr_id&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Usr ID &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.id}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Name Column --&gt;
          &lt;ng-container matColumnDef=&quot;user&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Usuario &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
              &lt;span *ngIf=&quot;!isVisible&quot;&gt;{{element.username}} &lt;/span&gt;
              &lt;input type=&quot;text&quot; [ngClass]=&quot;{'eye-unselec': !isVisible, 'eye-selec': isVisible }&quot; class=&quot;form-control&quot;
                [(ngModel)]=&quot;editName&quot; *ngIf=&quot;isVisible&quot; /&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Weight Column --&gt;
          &lt;ng-container matColumnDef=&quot;rol&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Rol &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
              &lt;span *ngIf=&quot;!isVisible&quot;&gt;{{element.rol}} &lt;/span&gt;
              &lt;input type=&quot;text&quot; [ngClass]=&quot;{'eye-unselec': !isVisible, 'eye-selec': isVisible }&quot; class=&quot;form-control&quot;
                [(ngModel)]=&quot;editRol&quot; *ngIf=&quot;isVisible&quot; /&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- Symbol Column --&gt;
          &lt;ng-container matColumnDef=&quot;create_date&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Fecha Alta &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.creationDate}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;status&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Estatus &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
              &lt;span *ngIf=&quot;!isVisible&quot;&gt;{{element.status}}&lt;/span&gt;
              &lt;input type=&quot;text&quot; [ngClass]=&quot;{'eye-unselec': !isVisible, 'eye-selec': isVisible }&quot; class=&quot;form-control&quot;
                [(ngModel)]=&quot;editStatus&quot; *ngIf=&quot;isVisible&quot; /&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;operaci&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; Operaciones &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element; let i = index&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary sns-btn edit&quot; (click)=&quot;edit(element,i);isVisible=!isVisible&quot;&gt;
                &lt;fa-icon [icon]=&quot;editIcon&quot; size=&quot;1x&quot;&gt;&lt;/fa-icon&gt;
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef=&quot;operaci2&quot;&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; &lt;/th&gt;
            &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary sns-btn edit&quot; (click)=&quot;delete()&quot;&gt;
                &lt;fa-icon [icon]=&quot;delIcon&quot; size=&quot;1x&quot;&gt;&lt;/fa-icon&gt;
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky: true&quot;&gt;&lt;/tr&gt;
          &lt;tr [attr.row_status]=&quot;row.id |json&quot; mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  
          &lt;!-- Row shown when there is no matching data. --&gt;
          &lt;tr class=&quot;mat-row&quot; *matNoDataRow&gt;
            &lt;td class=&quot;mat-cell&quot; colspan=&quot;4&quot;&gt;No data matching the filter &quot;{{input.value}}&quot;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  <p>COMPONENT.TS</p>
  <pre><code>public edit(element, i) {
   //if the inputs of each row of table are still blank, return to labels is allowed
   //this.isVisible = true; //show inputs
  
   if (this.editRol || this.editName || this.editStatus) {
     this.isVisible = false;
   }
   console.log(&quot; index value &quot; + i + &quot;element &quot; + JSON.stringify(element));
  }
  </code></pre>
  <pre><code>.eye-unselec{
    display: none;
  }
  
  .eye-selec {
    display: inline;
  }
  </code></pre>
  <p>This is one example, but I have different things.</p>
  <p>Here's <a href="https://stackblitz.com/edit/angular-h4hgkz%20file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">a link</a></p>
  <p>IMAGES:
  <a href="https://i.stack.imgur.com/jPDfF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jPDfF.png" alt="2" /></a></p>
  <p><a href="https://i.stack.imgur.com/J7rgA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J7rgA.png" alt="3" /></a></p>