CODEWITHSUNDEEP
typescriptangular
JME
JME

Reputation: 2363

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?

Upvotes: 1

Views: 568

Answers (1)

acdcjunior
acdcjunior

Reputation: 135862

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

Upvotes: 4

Related Questions