Retrieve data from a table within an Angular component

Struggling with the ng2-smart-table library, I am facing challenges in passing values entered in the edit line to a custom component:

Refer to the code snippet below for passing Maximum and Minimum Temperature values to the SmartTableEditorFunctionsComponent when adding a new row in the table.

    temperaturaMaxima: {
    type: 'number',
    title: 'Temperatura Máxima',
  },
  temperaturaMinima: {
    title: 'Temperatura Mínima',
    type: 'number',
  },
  temperaturaMedia: {
    title: 'Temperatura Média',
    type: 'number',
    editor: {
      type: 'custom',
      component: SmartTableEditorFunctionsComponent,
      valuePrepareFunction(instance) {
        instance.save.subscribe();
      },
    },
  },

Below is an image of the table: [enter image description here][1]

I added a button to retrieve the value but unable to do so. Component code:

  export class SmartTableEditorFunctionsComponent extends DefaultEditor {
  @Input() value: string | number;
  @Input() rowData: any;
  @Output() save: EventEmitter<any> = new EventEmitter();
  constructor() {
    super();
  }

  getPlaceholder(value: any) {
    const id = value.column.temperaturaMaxima;
    return id;
  }

  test() {
    const id = this.rowData.temperaturaMaxima;
    alert('TESTE' + id);
  }
}

Template code of the component:

   {{ cell.newValue }}
<input
  type="number"
  [(ngModel)]="cell.newValue"
  [name]="cell.getId()"
  [placeholder]="cell.getTitle()"
  [disabled]="!cell.isEditable()"
  (click)="onClick.emit($event)"
/>

<button (click)="test()">Retrieve Value

Seeking help from someone who can guide me through this issue. [1]: https://i.sstatic.net/4QF1Y.png

Answer №1

It appears that you are attempting to access the following:

    @Input() rowData: any;

However, it seems that no value has been assigned to it. There could be a possibility that smart-table is supposed to populate these variables for you, but it might just be an oversight on your end in passing data to your component.

You will need to pass data into it somewhere in your template, similar to how it is shown in the input example below:

    [rowData]="your_data"

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

Personalized prefix for Angular and WebStorm components

After starting a project in Angular with Visual Studio Code a few months ago, I decided to switch to WebStorm and upgraded the project to Angular 4.0 today. Although my project is running smoothly without any errors, I encountered an issue in WebStorm: ...

Experience the power of combining React with typescript, webpack, and ui-router-react for

After carefully studying the ui-router-react documentation (), I am encountering several challenges with webpack compilation when importing import {UIRouter, UIView, UISref, UISrefActive, pushStateLocationPlugin} from 'ui-router-react'; This is ...

How to eliminate a particular validator from a form group in Angular

My goal is to eliminate the specific validator from the validator array so that I can reconfigure the controls when certain values have changed. I am aware of the traditional solution where I would need to repeatedly set validators. checked(event: MatC ...

Angular fails to recognize a module that is clearly located in the node_modules directory

After creating an Angular library to manage authentication and successfully using it in various projects via NPM, I encountered a problem. Despite initially testing the library with npm link and publishing it privately to npm, I now face errors when trying ...

Block users from printing in text input with Angular

I need to restrict users from entering text into a specific input field, even though they can click on it and select the value. Using the disabled attribute is not an option because it triggers another event when clicked. I also want users to have the ab ...

Encountering challenges with Object-Oriented Programming combined with Typescript: Are you experiencing a

Currently, I'm in the process of building a comprehensive authentication application using the MERN stack entirely in TypeScript. However, I am encountering some issues (specifically type errors) with my userController file. Here is my routes file: i ...

Re-activate video playback after 30 seconds of user inactivity (using RxJs)

My intention is to provide a brief explanation of the functionality I am looking for. Essentially, when a video is playing, I want it to pause if a user clicks on it, allowing them to do something else. Then, after 30 seconds of idle time, I need the video ...

Encountered an unexpected token error when executing karma-coverage in a project using TypeScript

I have been working on a simple Angular/Typescript project that includes 12 basic unit tests which all pass successfully. However, I am now looking to measure the code coverage of these tests. Despite trying different methods, I have not been able to achie ...

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

Hey there! I've been facing an issue with passing context from a Provider to a consumer in my application. Everything was working fine until suddenly it stopped. Let me walk you through a sample of my code. First off, I have a file named AppContext.t ...

How to stop a form from being cleared when a button is clicked in Angular 2

Within my form, there is a button that allows users to add an item to the object's array. <form (ngSubmit)="submit()" #myForm="myForm" class="form-horizontal" style="direction: ltr"> <div class="row"> <div class="col-md-6"> ...

Testing in Angular using the getByRole query functionality is successful only when the hidden: true option is utilized

Currently experimenting with a new library, I'm facing difficulties accessing elements based on their ARIA role. My setup includes angular 10.0.6, jest 26.2.1, along with jest-preset-angular 8.2.1 and @testing-library/angular 10.0.1. Following instru ...

Deno.Command uses backslashes instead of quotes for input containment

await new Deno.Command('cmd', { args: [ '/c', 'start', `https://accounts.spotify.com/authorize?${new URLSearchParams({ client_id, response_type: 'code', ...

Learn a simple method of integrating carousels into text elements within a grid using exclusively Bootstrap 5

I need to incorporate a carousel into this section of my code using only Bootstrap 5. However, the current implementation is not functioning as expected (the items are stationary): This is the relevant HTML snippet: <div class="container px-4" ...

Converting Angular 2/TypeScript classes into JSON format

I am currently working on creating a class that will enable sending a JSON object to a REST API. The JSON object that needs to be sent is as follows: { "libraryName": "temp", "triggerName": "trigger", "currentVersion": "1.3", "createdUser": "xyz", ...

What is the best way to apply filtering to my data source with checkboxes in Angular Material?

Struggling to apply datatable filtering by simply checking checkboxes. Single checkbox works fine, but handling multiple selections becomes a challenge. The lack of clarity in the Angular Material documentation on effective filtering with numerous element ...

Utilizing getter and setter functions within a setter with a type guard

I need to implement a getter and setter in my class. The setter should accept a querySelector, while the getter is expected to return a new type called pageSections. The challenge I'm facing is that both the getter and setter must have the same argum ...

Restarting an Angular app is necessary once its HTML has been updated

I've encountered an interesting challenge with an application that combines MVC and Angular2 in a not-so-great way. Basically, on the Index page, there's a partial view loading the Angular app while also including all the necessary JavaScript li ...

Issue with accessing data in React Admin Show Page using useRecordContext() function leads to undefined return

Within a basic RA application, I am attempting to showcase an item known as a "card" utilizing a Show Page. The fields—specifically id and title—are being presented correctly. Nevertheless, the useRecordContext() hook is consistently returning undefin ...

Stream of information that triggers a specific action based on a specified condition

I'm dealing with an observable stream where I need to make two calls after retrieving the initial object using two id's found within the object. One of these id's, siteId, is optional and may or may not be present. If it is present, I need t ...

Using Angular to bind a click event to an element after it has been compiled

I am currently developing an application for students using Angular 5. In this application, users can access and view various documents. When a user enters a document, a set of tools, including a marker tool, are displayed. This marker tool allows users to ...