How to visible button on specific row in table using Angular 5?

Question

I am new to angular. I want to visible button of save and cancel on checkbox change event for that particular row in table. How can I set that. I am using following code :

<tr *ngFor="let configuration of configurationList;">
          <td>{{configuration.label}}</td>
          <td class="text-center">
            <mat-checkbox color='primary' name="{{configuration.id}}" [checked]="configuration.data" [(ngModel)]="configuration.data"
              (change)="onCheckedChange($event,configuration)"></mat-checkbox>
          </td>
          <td class="text-center">
            <div class="action-wrap" *ngIf="configuration.isEdit">
              <a  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>
            </div>                                 
          </td>
        </tr>

both tag will be visible when checkbox is change and only for those row. otherwise both are hidden. If I am selecting first row checkbox and then after select second row checkbox then button are visible for second row only.

Actually data is used for display checkbox checked or not when first time load. So it will display button on already selected checkbox.

If checkbox is change then and then button will be visible.

My event code is :

onCheckedChange(event,configuration) {       
  configuration.isEdit=true;    
}

cancel(configuration) {
  this.configurationList.forEach(item => {
    item.isEdit = false;
  }
);

Thank you.

Add or remove a class with `[class.]="expression"` that shows or hides that element based on a condition. Or use `*ngIf="expression"` on the button container. [Cheat sheet.](https://angular.io/guide/cheatsheet) — msanford, Apr 25 '18 at 12:11
Yes I provided one, click the link at the end of my comment. — msanford, Apr 25 '18 at 12:15
I have tried ngIf directive but it visible for all rows in table. I just want to visible for that particular row. — Srusti Thakkar, Apr 25 '18 at 12:20

score 0 · Answer 1 · answered Apr 25 '18 at 12:20

Check this example for how to use ngClass Directive

https://stackblitz.com/edit/angular-eh4acx?file=index.html

 <h4>NgClass</h4>
     <ul *ngFor="let person of people">
          <li [ngClass]="{
          'text-success':person.country === 'UK',
        'text-primary':person.country === 'USA',
        'text-danger':person.country === 'HK'
         }">{{ person.name }} ({{ person.country }})
     </li>

Component.ts

  class NgClassExampleComponent {

    people: any[] = [
   {
  "name": "Douglas  Pace",
  "age": 35,
  "country": 'UK'
},
{
  "name": "Mcleod  Mueller",
  "age": 32,
  "country": 'USA'
},
{
  "name": "Day  Meyers",
  "age": 21,
  "country": 'HK'
},
{
  "name": "Aguirre  Ellis",
  "age": 34,
  "country": 'UK'
},
{
  "name": "Cook  Tyson",
  "age": 32,
  "country": 'USA'
}
];

}

https://stackblitz.com/edit/angular-3qqbnu?file=app/checkbox-overview-example.ts Check this example — Chellappan வ, Apr 25 '18 at 13:04

score 0 · Answer 2 · answered Apr 25 '18 at 12:23

You can use ngclass to hide the element with css (display: none;)

<a [ngClass]="{'hidden': configuration.data}" href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
<i class="fa fa-check"></i>

or you can use ngif to remove the element

<a *ngIf="configuration.data" href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
<i class="fa fa-times"></i>

(if configuration.data is a boolean)

score 0 · Answer 3 · answered Apr 25 '18 at 12:28

0

use [hidden] on buttons and set your expression

              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>

answered Apr 25 '18 at 12:28

Arash

3,458
7
32
50

this should work , try not to use [checked] when using ngModel.have you tried my code ? – Arash Apr 25 '18 at 12:42
use {{configuration.data}} in your template as test to make sure if configuration.data is changing. – Arash Apr 25 '18 at 12:43
try to remove *ngIf="configuration.isEdit" – Arash Apr 25 '18 at 12:59
it is probably ngIf , remove to see just if it works, I will tell you why. – Arash Apr 25 '18 at 13:04

msanford · Answer 4 · 2018-04-25T13:15:11.157

Re-use the same condition for checking your checkbox. Note what I added to the

<div class="action-wrap">

Style both your buttons together unless you need separate logic for each.

You can either add / remove the element from the DOM entirely:

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
        <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
                    (change)="onCheckedChange($event,configuration)">
        </mat-checkbox>
    </td>
    <td class="text-center">
        <div *ngIf="configuration.data" class="action-wrap">
            <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
            <i class="fa fa-check"></i>
            </a>
            <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
            <i class="fa fa-times"></i>
            </a>
        </div>                               
    </td>
</tr>

Or hide it with a CSS class.

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
    <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
        (change)="onCheckedChange($event,configuration)"></mat-checkbox>
    </td>
    <td class="text-center">
    <div [class.hidden]="!configuration.data" class="action-wrap">
        <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
        <i class="fa fa-check"></i>
        </a>
        <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
        <i class="fa fa-times"></i>
        </a>
    </div>                               
    </td>
</tr>

.hidden { display: hidden; }

@Srusti So, did something work? You should comment on an answer if you've implemented it, rather than the original question. It makes it too hard to follow what's going on. — msanford, Apr 25 '18 at 15:53

How to visible button on specific row in table using Angular 5?

4 Answers4