I'm in the process of creating several buttons, each linked to a distinct modal element. I want to achieve this by using their id. However, I'm facing difficulties when trying to reference the variable from the typescript file.
Although I don't have access to the implementation of the function, I am aware that it works fine; there are no errors thrown when a hard-coded "0" is passed, and each button successfully opens the first modal. The index is correctly passed to the child component.
I've experimented with interpolation, but encountered an error due to security reasons. I've also attempted replacing onclick with (click), but that caused issues with the function on that particular line.
parent.html
<ul class="example" *ngFor="let v of vs, let i = index">
<child-component
[index]="i">
</child-component>
</ul>
child.html
<button
type="submit"
id="button{{index}}" //interpolation works here
class="updatebtn"
onclick="function(this, index)"> //problem line
</button>
<div id="{{index}}" class="special-modal">item {{index}}</div>
child.ts
export class childComponent implements OnInit {
@Input() index: string;
}
Currently receiving a ReferenceError: index is not defined at HTMLButtonElement.onclick.