JME JME - 4 months ago 13
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 -->
<td>
<md-checkbox></md-checkbox>
</td>
<!-- For each entry in the config, create a cell -->
<td *ngFor="let column of config.columns"
....
</td>
</div>
</tr>


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

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)">