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

What is causing the Typescript compiler to interpret an element in a string array as the type 'never'?

My Typescript function compiled without issue in version 3.5.3, but after updating to 3.8.3, it now throws a confusing error during compilation. import { isNumber, toInteger, padNumber } from './math'; parse(value: string): NgbDateStruct { if ...

When using Styled Components with TypeScript, you may encounter the error message "No overload matches

Recently, I've delved into Style Components in my journey to create a weather app using React Native. In the past, I would typically resort to CSS modules for styling, but it appears that this approach is not feasible for mobile development. Below is ...

Error TS2345: The argument provided, which is of type 'Promise<ReadonlyArray<Object>>', cannot be assigned to a parameter that must be of type 'T | PromiseLike<T> | undefined'

My goal is to return the ReadonlyArray<> in my promise so that I can send it back to the original method that called 'dispatchToThisProcess'. This abstraction allows for potential future updates to multiple processes. Below is the code snippet: ...

What is the best way to navigate through the underlying MatDialog while the MatSelect is active?

When attempting to customize the scroll behavior of a MatSelect in a regular page, I discovered that using the MAT_SELECT_SCROLL_STRATEGY injection token with the NoopScrollStrategy allows for scrolling the underlying page while keeping the MatSelect stati ...

Tips for modifying a text input in a list

Managing comment boxes and buttons for each box can be a bit tricky. Clicking on the edit button should enable only that specific textbox, while save or cancel actions should hide the text box and show "<p></p>". Below is my ng-template where ...

Testing the Window beforeunload event method in an Angular unit test: A guide

Currently, I am actively involved in a project using Angular 8. One of the features I implemented was to show a confirm prompt when a user tries to navigate away from the site. This functionality was added by integrating the following function into my com ...

Declare that a method alters a value with state

Here's a more streamlined version of my code. Check out my custom hook below: export const useStep = () => { const [step, setStep] = useState<Steps>("sending"); const changeStep = (newStep: Steps) => setStep(newStep); return { ste ...

Creating cohesive stories in Storybook with multiple components

I need assistance with my storybook setup. I have four different icon components and I want to create a single story for all of them instead of individual stories. In my AllIcons.stories.tsx file, I currently have the following: The issue I am facing is ...

Exit the current dialog and switch to a different route while encountering difficulties with an open dialog in Angular 4

I've spent several hours searching, but couldn't find a similar post. Here's the issue I'm facing: When I click a button in the routeA component, it navigates to routeB and opens dialogB. After closing dialogB, it should navigate back ...

Is there another way to implement this method without having to convert snapshotChanges() into a promise?

When trying to retrieve cartIdFire, it is returning as undefined since the snapshot method is returning an observable. Is there a way to get cartIdFire without converting the snapshot method into a promise? Any workaround for this situation? private asyn ...

The continuity of service value across parent and child components is not guaranteed

My goal is to update a value in a service from one component and retrieve it in another. The structure of my components is as follows: parent => child => grandchild When I modify the service value in the first child component, the parent receives the cor ...

Issue encountered while defining a component in Angular 16

Currently, I am in the process of learning Angular by following the tutorial provided on Angular.io. As part of this journey, I have declared a home component within my Angular application using the given code: ng generate component home --standalone --in ...

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

What is the best way to invoke a function from a Service to a Component in Angular?

Currently, I am in the process of learning Angular and recently created an alarm clock feature. In this functionality, users have the option to select alarms they wish to cancel by using checkboxes that are then stored in local storage through the use of & ...

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

I've been struggling to find a solution for this overload issue with no luck so far. My stack includes Typescript, Styled-components, and Material-UI. I am utilizing styled(MUIButton) to extend the default Button from MUI. While my props are being pas ...

Is there a method in Angular to restrict change detection to only the current component and its descendant components?

Is there a way to trigger an event in the child component without traversing the entire component tree from the parent? import { Component } from '@angular/core' @Component({ selector: 'my-app', template: '<b>{{ te ...

Adding and Removing Classes from Dynamically Added DOM Elements in Angular 2/4

I'm currently working on creating a unique list, similar to the notification system seen on platforms like Facebook. The list is pulled in via JSON and displayed on the UI using ngFor. Each item in the list has a default CSS class called "unread", whi ...

Struggling with TypeScript Errors while Extending Theme Colors in Material UI React using TypeScript

Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ ...

What makes fastify-plugin better than simply calling a regular function?

I recently came across a detailed explanation of how fastify-plugin operates and its functionality. Despite understanding the concept, I am left with a lingering question; what sets it apart from a standard function call without using the .register() metho ...

What is the best way to include a non-Typed Angular service in a TypeScript class?

I have a module and service in Angular that were originally developed without TypeScript, like this: MyModule = angular.module('MyModule', ['dependency1', 'dependency2']); MyModule.factory('MyService', ['$other ...