JME JME - 1 year ago 82
TypeScript Question

ReferenceError undefined on defined function

I have a function defined in my app.component.ts file defined as as such

export class AppComponent {


onRowSelected(record:any) {
this.selectedRecord = record;


I use the function in the app.component.html file as a callback function when a table row is selected

<tr *ngFor="let record of records">
<div onclick="onRowSelected(record)">
<!-- Create a checkbox for each row -->
<!-- For each entry in the config, create a cell -->
<td *ngFor="let column of config.columns"

I don't understand why I am getting

VM11199 Uncaught ReferenceError: onRowSelected is not defined

when the function is clearly defined in my component. Any insights?

Answer Source

onclick is a "vanilla" (regular) JavaScript binding. The function executed will be window.onRowSelected. Since it doesn't exist, you get the error.

The correct way for binding JavaScript events in Angular2 is (nameOfTheEvent)="codeToBeExecuted". This way, the functions at the @Component will be available.

This way, since you are trying to bind the click event, for angular, the correct is (click).

So this:

<div onclick="onRowSelected(record)">

Should become:

<div (click)="onRowSelected(record)">