0

I am trying to update a table cell on hover of that single column, NOT all the columns of same content.this is updating all the columns where my ngswitchCase is pending, but I only want that single cell in the table of that particular row to get updated/render the different button. 

<div [ngSwitch]="rowData['dataFromJson']">
  <div *ngSwitchCase="'pending'">
    <div *ngIf="condition"; then thenBlock; else elseBlock">
    </div>
    <ng-template #thenBlock>
      <button (mouseover)="condition=!condition">A</button>
    </ng-template>
    <ng-template #elseBlock>
      <button (mouseleave)="condition=!condition">B</button>

    </ng-template>
  </div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
vmk
  • 41
  • 3

1 Answers1

0

Assuming we're seeing a fragment of a larger template, not the entire template of the component: if there's one property condition shared across the component, then of course it's either true or false for everyone. Make condition an array (one entry for every row).

Alternatively, make the above a separate component, the condition will be then enclosed within its scope.

mbojko
  • 13,503
  • 1
  • 16
  • 26
  • Thanks for the reply, the condition is a simple boolean and this snippent is supposed to be in a where the dataFromJson supposed to populate the table. I am trying to put buttons intead of data. and when you hover on button A it should change to button B – vmk Apr 04 '19 at 16:26