Angular2: Delete selected table row on clicking button in modal window

Question

I am trying to implement modal when the "delete" button is clicked on any row from the table, wherein it pops a modal window asking for confirmation.

When I just implement the delete without the modal it seems to be working fine and deletes that specific row only, but on using the modal it deletes the 1st row alone and not the selected row.

user.component.html

<h1>{{welcome}}</h1>
<table class="table table-bordered">
    <tr>
        <th>#</th>
        <th>Game</th>
        <th>Platform</th>
        <th>Release</th>
        <th>Actions</th>
    </tr>
    <tr *ngFor="let game of games | paginate: {itemsPerPage: 5, currentPage:page, id: '1'}; let i = index">
        <td>{{i + 1}}</td>
        <td>{{game.game}}</td>
        <td>{{game.platform}}</td>
        <td>{{game.release}}</td>
        <td><button data-title="title" data-id="2" data-toggle="modal" data-target="#deleteModal" class="confirm-delete"> Delete</button>
    </tr>
</table>
<pagination-controls (pageChange)="page = $event" id="1" maxSize="5" directionLinks="true" autoHide="true">
</pagination-controls>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
        </div>
        <div class="modal-body">

            <div class="alert alert-danger">Are you sure you want to delete this Record?</div>

        </div>
        <div class="modal-footer ">
            <button type="button" class="btn btn-success danger" (click)="deleteGame(i)"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

user.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user',
  templateUrl: 'user.component.html',
})
export class UserComponent  { 
    welcome : string;
    games : [{
        game: string,
        platform : string,
        release : string
    }];
    constructor(){
        this.welcome = "Display List using ngFor in Angular 2";

        this.games = [{
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "Deus Ex: Mankind Divided",
            platform: " Xbox One, PS4, PC",
            release : "August 23"
        },
        {
            game : "Hue",
            platform: " Xbox One, PS4, Vita, PC",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        },
        {
            game : "The Huntsman: Winter's Curse",
            platform: "PS4",
            release : "August 23"
        }];
    };

    deleteGame(i){
      this.games.splice(i,1);
    }
};

Answer 1

You are looping through the game array in the table and give an i in each iteration. This i is known in the ngFor, but not outside the loop. In the modal you call the deleteGame(i) and i is unknown outside the loop.

You could use a variable 'selectedGame' and make a reference to that attribuut in the row where you click and set it to null if you press cancel. in the deleteGame method you can now remove the object from the array because there is a reference to the selected game object now.

Maybe a better approach is to make a separated component for the modal and pass in the game object through an Input() in the modal component and use an eventEmitter to emit the object back in the parent component where you can invoke the deleteGame method when the emitter is emitted with the game object.

It could look something like:

<game-delete-modal [selectedGame]="selectedGame" (deleteGame)="deleteGame($event)"></game-delete-modal>

In the modal component use an input

@Input() selectedGame;

And an output

@Output() deleteGame = new EventEmitter<Game>();

And a delete method in the modal that emits the deleteGame.

onDeleteGame() {
    this.deleteGame.emit(this.selectedGame);
};

I hope it helps you.