I have a 2D grid in my component that is created using nested ngFor loops, and I want to make certain grid elements clickable under specific conditions so they can call a function. Is there a way for me to pass the index of the clicked array element to the associated function when setting up the href attribute? The array has three possible states: undefined, true, or false. The grid is displaying correctly, but I am struggling to figure out how to determine which square was clicked.
This is the base class structure:
export abstract class BaseGrid implements OnInit {
aGrid: (boolean | undefined)[][];
...
}
The TypeScript code for the component is as follows:
import { Component, OnInit } from '@angular/core'
import { BaseGrid } from '../base-grid/base-grid.component';
@Component({
selector: 'display-my-grid',
templateUrl: './my-grid.component.html',
styleUrls: ['./my-grid.component.css']
})
export class MyGrid extends BaseGrid implements OnInit {
constructor() {
super();
}
ngOnInit() {
}
}
And here's the template code:
<table class="mybg">
<tr *ngFor="let aRow of aGrid">
<td *ngFor="let anElement of aRow">
<div *ngIf="anElement === undefined" class="elementDiv"><a href="#"><img src="../../assets/transparentGif.gif" class="openElement" /></a></div>
<div *ngIf="anElement !== undefined && anElement === false" class="elementDiv"><img src="../../assets/aMarker.gif" class="elementMarker" /></div>
<div *ngIf="anElement !== undefined && anElement === true" class="elementDiv"><img src="../../assets/bMarker.gif" class="elementMarker" /></div>
</td>
</tr>
</table>