Mark item as updated in NgFor loop using Angular 8

Question

I have two sets of tables looping the same data.

Table 1 are the active items

Table 2 are the inactive items

When the user selects an item, I'd like to mark the item as updated by displaying a "Pending" indicator or badge (ex: user selects checkbox to make the item active).

However, I'm having difficulty creating a unique identifer for each item in case the user reverts to their original selection (ex: back to inactive). I'd like the user to visualize their updated items before submitting.

page.component.html

<h1>Active</h1>
<table>
    <thead>...</thead>
    <tbody>
        <tr *ngFor="let selectedItemof itemDetailsInfo.getSelectedItems()">
            <td class="text-center">
                <span class="custom-checkbox">
                    <input type="checkbox"
                           id="{{selectedItem.id}}"
                           value="{{selectedItem.id}}"
                           (change)="itemDetailsInfo.getSelectedItems(); isUpdated(selectedItem.id)"
                           [(ngModel)]="selectedItem.selected" />
                    <label for="{{selectedItem.id}}">
                        <svg class="icon icon-20 green">
                            <use xlink:href="assets/images/icons.svg#circle-check" />
                        </svg>
                    </label>
                </span>
            </td>
            <td>
                {{selectedItem.displayName}}
                <span *ngIf="itemId.itemPending" class="badge badge-pill">Pending</span>
            </td>
        </tr>
    </tbody>
</table>

<h1>Inactive</h1>
<table>
    <thead>...</thead>
    <tbody>
        <tr *ngFor="let unSelectedItem of itemDetailsInfo.getUnSelectedItems()">
            <td class="text-center">
                <span class="custom-checkbox">
                    <input type="checkbox"
                           id="{{unSelectedItem.id}}"
                           value="{{unSelectedItem.id}}"
                           (change)="itemDetailsInfo.getUnSelectedItems(); isUpdated(unSelectedItem.id)"
                           [(ngModel)]="unSelectedItem.selected" />
                    <label for="{{unSelectedItem.id}}">
                        <svg class="icon icon-20 green">
                            <use xlink:href="assets/images/icons.svg#circle-check" />
                        </svg>
                    </label>
                </span>
            </td>
            <td>
                {{unSelectedItem.displayName}}
                <span *ngIf="itemId.itemPending" class="badge badge-pill">Pending</span>
            </td>
        </tr>
    </tbody>
</table>

page.component.ts

pending: boolean = false;
itemId: any;

...

isUpdated(id: any) {
  let itemId = id;
  itemId.itemPending = !itemId.itemPending;
}

I have a feeling I'm making this more difficult than it needs to be.

Answer 1

What you have to do is to introduce the itemIsPending property to the global list on which you are using the ngfor. And convert the if that if the item.pending display that badge.

*ngIf="selectedItem.itemPending" class="badge