Error in function due to undefined reference

Within my app.component.ts file, I have a function that is defined as follows:

export class AppComponent {

    ....

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

   ....
}

This function is used in the app.component.html file as a callback 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>

Even though the function is clearly present in my component, I am encountering an error message that states:

VM11199 Uncaught ReferenceError: onRowSelected is not defined

Why is this happening? Any insights would be appreciated.

Answer №1

onclick is a standard JavaScript event binding method. The function that would execute is window.onRowSelected, but since it does not exist, an error occurs.

In Angular2, the proper way to bind events in JavaScript is using

(nameOfTheEvent)="codeToBeExecuted"
. This allows the functions in the @Component to be accessible.

Therefore, for binding the click event in Angular, you should use (click).

For example:

<div onclick="onRowSelected(record)">

Should be changed to:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the request body of a multipart/form-data, then apply the validationPipe

I am attempting to convert a formData request from string to a JSON object using transformation and then validate it with the validationPipe (class-validator). However, I encountered an issue: Maximum call stack size exceeded at cloneObject (E:\p ...

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

Combine values within a loop and transform them into an object using TypeScript

Being new to typescript, I am unsure how to map values inside a loop. I have a function that performs some logic and returns a number. This function will be called in another function to return two values: a number and a string. export class matrix { ...

Creating an array from a numerical value in Angular Controls

In my application, I need to create an array starting from 1 up to a specified number, which in this case is 6, using JavaScript/TypeScript. Here is my attempted code: this.builder.group({ 'staff': this.builder.group({ staf ...

Angular's change detection is constantly triggered by mousemove events

After noticing that the mousemove event on a specific element triggers continuous change detection, I looked into possible solutions and came across suggestions to utilize the runOutsideAngular method from NgZone. Attempting to implement this advice, I tr ...

"Enhance your software with a customizable interface or develop new functionalities to generate analogous

Having API data with a similar structure, I am looking to streamline my code by filtering it through a function. However, as someone new to TypeScript, I am struggling to implement this correctly using a function and an interface. Essentially, I aim to ach ...

Submitting an event on an Angular modal component

I recently created a modal component using the following template structure: <div class="header"></div> <div class="body"> <ng-content></ng-content> </div> <div class="footer" ...

What is the best way to set up moment.js globally in an Angular application?

Once I have added moment.js to my project, the next step is to import it in order to use it within components. import * as moment from 'moment'; In each component, I need to create an empty variable and set up the same configurations in the ngO ...

Strategies for Implementing Responsive Design in Angular and Bootstrap Shopping Cart Apps to Deliver Custom Views on Mobile and Desktop Devices

Our shopping cart application utilizes Angular and Bootstrap. We are in need of routing different pages for mobile and desktop screens. Specifically, we want the /cart route to display a different page on mobile devices compared to desktops, taking into ...

Cookies are not being stored by the browser

I'm having an issue with storing a cookie sent from my Spring MVC backend at http://localhost:8080/ to my Angular frontend at http://localhost:4200. Even though I have configured CORS properly to allow credentials and specified the allowed origins, th ...

What are the steps to display a fallback route with TypeScript in Angular 6?

I am currently working with the AppRouting module and have the following code: ... const routes: Routes = [ ... { path: 'events', data: { preload: true }, loadChildren: './events/events.module#EventsModule' }, ... ...

Discover the steps to extend static generic methods in Typescript

My issue lies in compiling Typescript code as the compiler doesn't seem to recognize the inheritance between my classes. Whenever I attempt to compile, an error arises: Property 'create' does not exist on type 'new () => T'. ...

Failure to validate Google KMS asymmetric keys

Currently, I am in the process of developing an OAuth server implementation specifically tailored to meet custom requirements. In my endeavor, I decided to utilize Google's KMS service for the signing and verification of JWT tokens. While I managed t ...

Unable to locate the specified environment variable in the current nest

Currently, I am referring to the official documentation on the NestJs website that provides a guide on using config files: https://docs.nestjs.com/techniques/configuration Below is the code snippet I am working with: app.module import { Module } from &ap ...

Encountering an error when attempting to iterate over an undefined property using an API

I am trying to fetch all classes and their assignments from Google Classroom. I successfully used Google's example code for listing the classes, but had to write my own code for listing the assignments. While the code runs as expected and lists the as ...

Firebase data not appearing on screen despite using the async pipe for observables

My current challenge involves accessing data based on an id from Firebase, which comes back as an observable. Upon logging it to the console, I can confirm that the Observable is present. However, the issue arises when attempting to display this data on th ...

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

typescript method searching for and merging all keys starting with the specified prefix

Take a look at this object: https://i.sstatic.net/V0xvI.png Where each property in system(1) holds tridimensional coordinates. Is there a more efficient method to consolidate properties with the same prefix without nesting loops within loops? My goal is ...

Issue with Angular2 discount calculation formula malfunctioning

I'm encountering a rather perplexing issue with Angular2/Typescript. My goal is to compute the final price based on a specified discount value. Here's the formula I am using: row.priceList = row.pricePurchase + (row.pricePurchase * row.markUp / ...

Is there a way in NodeJS to preview the contents of a file in a browser before initiating the download process?

Is there a way to preview a file in the browser before downloading it in NodeJS? This would allow users to make sure they are choosing the correct file to download. Currently, I have this code for downloading a file: app.get("/download/file", (req, res) = ...