What is the best way to extract a value from an input within a filter?

I am currently utilizing ngx-easy-table in my application. I am trying to retrieve the input filter value on keyup event, but I have not been able to find any helpful information in the documentation.

Does anyone have any insights or suggestions on how to achieve this?

<ngx-table [configuration]="configuration" [data]="rows" [columns]="columns"
           [noResultsTemplate]="noResultsTemplate">
  <ng-template let-row>
    <td>
      <div>{{row.orgaosigla}}</div>
    </td>
    <td>
      <div>{{row.itpanobjeto | truncatetext:50 }}</div>
    </td>
    <td>
      <div>{{float(row.itpanvalorestimadototal) | currencyformat }}</div>
    </td>
    <td>
      <div *ngIf="row.itpanmes">{{ mes(row.itpanmes) }}</div>
    </td>
    <td>
      <div>{{row.priordescricao}}</div>
    </td>
    <td>
      <div>{{row.obestdescricao}}</div>
    </td>
    <td>
      <div>{{row.stipadescricao}}</div>
    </td>
    <td>
      <div>
        <a matTooltip="Excluir o Vínculo " (click)="deletar(row)" matTooltipClass="tooltip-azul"
           matTooltipPosition="above"
           class="mr-2 mouseHover">
          <mat-icon class="material-icons delete">link_off</mat-icon>
        </a>
      </div>
    </td>
  </ng-template>
</ngx-table>

This is a table displaying various columns based on the given configuration:

public columns: Columns[] = [
  { key: 'orgaosigla', title: 'Unidade - Sigla' },
  { key: 'itpanobjeto', title: 'Objeto' },
  { key: 'itpanvalorestimadototal', title: 'Valor Estimado (R$)' },
  { key: 'itpanmes', title: 'Mês a Contratar' },
  { key: 'priordescricao', title: 'Grau de Prioridade' },
  { key: 'obestdescricao', title: 'Objetivo Estratégico' },
  { key: 'stipadescricao', title: 'Situação' },
  { key: 'actions', title: 'Ações', searchEnabled: false },
];

The specific input field from which I need to retrieve the value on keyup is itpanvalorestimadototal.

Answer №2

While the documentation doesn't specify any event to bind to, you can achieve your desired functionality using Custom Filters. Check out this link for more information: https://github.com/ssuperczynski/ngx-easy-table/blob/master/src/app/demo/custom-filters/custom-filters.component.ts

Here is the code: https://github.com/ssuperczynski/ngx-easy-table/tree/master/src/app/demo/custom-filters.

However, keep in mind that this approach only involves adding extra text boxes (or input fields) outside of the table itself.

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

Transferring information using TypeScript

My issue arises when transferring data from HTML in the following format Karbohidrat :{{karbohidrat}} <button ion-button (click)="cekHalamanMakanan('karbohidrat')">View carbohydrate foods</button> <br> Then, I retrieve the kar ...

Methods for resolving a ViewStyle typescript issue in react native

Trying to pass a width parameter into StyleSheet is causing an error like this: <View style={styles.children(width)}>{children}</View> Here's how I'm trying to use it: const styles = StyleSheet.create({ modalContent: { flex: ...

What causes React JS to continuously render in an infinite loop when using hooks and useState

I am struggling with updating the current state of my component based on a result using a custom hook in React. Whenever I try to update it, I end up in an infinite loop rendering due to my usage of the useState() hook. I am still new to working with Rea ...

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

I'm currently working on a project where there's a component named ListItemTextStyle. Within that component, the prop type is defined as follows: import { LinkProps, ListItemButtonProps, } from '@mui/material'; type IProps = LinkP ...

Encountering TS 2732 error while attempting to incorporate JSON into Typescript

Having trouble importing a JSON file into my TypeScript program, I keep getting error TS2732: Can't find module. The JSON file I'm trying to import is located in the src folder alongside the main.ts file. Here's my code: import logs = requi ...

Find the TypeScript data type of an array that may be empty

Struggling to determine the TypeScript type of data being passed into my React component. The data could either be related to cats or dogs: my-component.tsx: export const MyComponent = { props: { data: any; // Ideally looking to utilize the union type & ...

What steps should I take to successfully deploy my Vite-React and Typescript application on Heroku?

I'm having difficulty deploying my front-end Vite application to Heroku because it seems to be searching for a start script, which Vite doesn't have. Here are the logs I am seeing: 2022-08-23T23:34:35.000000+00:00 app[api]: Build succeeded 2022- ...

Sending information to components in Angular using Router

Should I pass data through the angular router to a component, or is it better to use a service? Currently, the component is receiving data in the following way: this.account = activatedRoute.snapshot.data.account ...

What is the best method to compare two times and determine if they fall on the same date within an Angular 2/4 application? The time should be in the format of "HH:mm AM

Is there a way to validate if my time period falls on the same date? let startTime = currentSelection.startTimeHr + ":" + currentSelection.startTimeMin + " " + currentSelection.startTimeAMPM; let endTime = currentSelection.stopTimeHr + ":" + currentSele ...

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

Currently, I am utilizing an API-service that delivers an Observable containing an array of elements. apiMethod(input: Input): Observable<ResultElement[]> Typically, I have been selecting the first element from the array, subscribing to it, and the ...

Tips for storing an unmatched result in an array with a Regexp

Is it possible to extract the unmatched results from a Regexp and store them in an array (essentially reversing the match)? The following code partially addresses this issue using the replace method: str = 'Lorem ipsum dolor is amet <a id="2" css ...

Creating a side navigation component with Angular Material 2

specialist. I am looking to create a side navigation component using angular material 2. I want to divide the side nav component and content component. As a result, I have created two components: side nav and contents. <!--contents.component.html--& ...

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?

I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...

issue with integrating promise in angular 4

I'm currently learning about promises and how to implement them in Angular. I have written the following code in StackBlitz. My goal is to display the array whenever it contains a value by using promises in Angular. This is my HTML code: <h2>A ...

The date in a nodejs application appears to be shifted by one day

Despite similar questions being asked before here, the solutions provided did not resolve my issue. Here is the scenario I am dealing with: https://i.sstatic.net/H9rcO.png Upon clicking save, I collect data from certain fields to generate a date using th ...

Is the pipe operator in RxJS essential for utilizing store.select in NgRx?

While reviewing some code, I noticed a pipe operator used without a chain. Is this necessary or does it provide any benefits at all? Code snippet with pipe: this.store.pipe(select(currentUser)).subscribe(authState => {}); Code snippet without pipe: ...

Nestjs: Accessing the request or context using a Decorator

In my current project using NestJS, I am attempting to make the executionContext accessible in a logger for the purpose of filtering logs by request. Each injectable has its own instance of a logger, and I want to maintain this setup (where the scope of t ...

What is the best way to format the date in an input tag to comply with ISO standards (ex: 2017-06-17T21:35:07

Here is an example of an input tag: <input type="datetime-local" class="datepicker-date" id="start-date" name="start-date" placeholder="YYYY-MM-DD" class ="form-control" formControlName = "startTime" data-date-format=""> To achieve the desired date ...

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. Image 2: This ...

developing an email feature within Angular, incorporating confirmation emails

I am currently working on implementing a function in Angular to validate email addresses and confirmation emails. However, I am facing an issue where even after correcting the confirmation email to match the original email, I still receive an error message ...