how to show or hide edit button based on column value in p-table

Question

how to show or hide edit button based when column srcSysName value = "ANO" in p-table

Here is the code

<ng-template pTemplate="body" let-ACC_LIST let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="ACC_LIST">
<td>
    {{ACC_LIST.accntNum}}
</td>
 <td>
      <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="ACC_LIST.shortName">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{ACC_LIST.shortName}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>{{ACC_LIST.srcSysName}}</td>
            <td style="text-align:center">

                <button *ngIf="!editing"  pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil"
                    (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>
                
            </td>
        </tr>
    </ng-template>

Please upvote the answer. If my solution is worked perfectly — Aman Gojariya, Mar 03 '21 at 10:20

score 0 · Accepted Answer · answered Feb 25 '21 at 04:38

Can you please add *ngIf="ACC_LIST.srcSysName === 'ANO'" in your edit button?

<ng-template pTemplate="body" let-ACC_LIST let-editing="editing" let-ri="rowIndex">
  <tr [pEditableRow]="ACC_LIST">
    <td>{{ACC_LIST.accntNum}}</td>
    <td>
      <p-cellEditor>
        <ng-template pTemplate="input">
          <input pInputText type="text" [(ngModel)]="ACC_LIST.shortName" />
        </ng-template>
        <ng-template pTemplate="output"> {{ACC_LIST.shortName}} </ng-template>
      </p-cellEditor>
    </td>
    <td>{{ACC_LIST.srcSysName}}</td>
    <td style="text-align: center">
      <button *ngIf="ACC_LIST.srcSysName === 'ANO'" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>
    </td>
  </tr>
</ng-template>

score 0 · Answer 2 · answered Feb 26 '21 at 06:10

0

<td style="text-align:center">
    <button *ngIf="ACC_LIST.shortName === 'ANO'"  pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit()" class="p-button-rounded p-button-text"></button>                
</td>

answered Feb 26 '21 at 06:10

Viral Patel

1,104
4
7

how to show or hide edit button based on column value in p-table

2 Answers2