i have a table in angular, i want to write a click event to change the vlaue of the cell that was clicked - angularjs-directive

Question

here is my Template that makes the table
<div class="container col-md-6 col-lg-6 container-fluid col-md-offset-3 col-lg-offset-3">
<h1 class="page-header">
multiplication-table <small>angular demo</small>
</h1>
<table class="table table-bordered ">
<tr *ngFor="let i of matnumbers" class="text-center ">
<td *ngFor="let j of matnumbers" class="text-center" (click)="showmul()">
<span *ngIf="showItem"> {{i*j}}</span>
<span *ngIf="!showItem"> {{i}}x{{j}}</span>
</td>
</tr>
</table>
</div>
this is the component:
export class MultiplicationTable {
matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
showmul() {
var that = this;
this.showItem = false;
setTimeout(function () {
that.showItem = true;
}, 550);
that.showItem = false;
}
}
unfortunatly this code change the spans of all the cells in my table,
and i want to change only the specific one that was clicked.
thanks.

Answer 1

export class MultiplicationTable {
shownNumbers: number[] = [];
matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
toggleNum(num: number) {
var index = this.shownNumbers.indexOf(num);
if(index != -1){
this.shownNumbers.splice(index, 1);
} else {
this.shownNumbers.push(num);
}
}
}
In your html
<div class="container col-md-6 col-lg-6 container-fluid col-md-offset-3 col-lg-offset-3">
<h1 class="page-header">
multiplication-table <small>angular demo</small>
</h1>
<table class="table table-bordered ">
<tr *ngFor="let i of matnumbers" class="text-center ">
<td *ngFor="let j of matnumbers" class=text-center"(click)="showmul(j)">
<span *ngIf="shownNumbers.indexOf(j) != -1"> {{i*j}}</span>
<span *ngIf="shownNumbers.indexOf(j) == -1"> {{i}}x{{j}}</span>
</td>
</tr>
</table>
This might work

Answer 2

this is the html
multiplication-table angular demo
<table class="table table-bordered ">
<tr *ngFor="let i of matnumbers" class="text-center ">
<td *ngFor="let j of matnumbers" class="text-center" (click)="toggleNum(i,j)">
<span *ngIf="shownNumbers.indexOf(i*10+j) != -1"> {{i}}x{{j}}</span>
<span *ngIf="shownNumbers.indexOf(i*10+j) == -1"> {{i*j}}</span>
</td>
</tr>
</table>
this is the component
export class MultiplicationTable {
shownNumbers: number[] = [];
matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
toggleNum(i: number, j: number) {
var num = j +i* 10;
var index = this.shownNumbers.indexOf(num);
if (index != -1) {
this.shownNumbers.splice(index, 1);
} else {
this.shownNumbers.push(num);
}
}
}