Utilizing PipeTransform in Angular 2/4 to Filter Table Data

I have implemented an angular2-table example and added a pipe for filtering the table based on name when selecting the "input radio"

Here is my custom pipe filter :

import * as _ from "lodash";
import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
    name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string): any {
        if (query) {
            return _.filter(array, row=>row.name.indexOf(query) > -1);
        }
        return array;
    }
}

You can view the Plunker example here: http://plnkr.co/edit/hhv4e8WliLkmpW2Bmn3A?p=preview

Can someone guide me on how to implement table filtering using input radio buttons?

Answer №1

To ensure that the radio buttons display relevant data, it is important to use values for those radio buttons that align with the data. For instance:

<input type="radio" [(ngModel)]="filterQ" value="Ralph" name="filterQ" /> Ralph

In your current setup, the value RAP for the first radio button does not match any data according to the pipe being used. By changing it to Ralph, it will now correspond with one record. Additionally, please note that your code is case sensitive, so RALPH will not function as expected.

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

When using Angular with WebApi, it is important to decide whether the models' first letter should be

Completely new to working with Angular and I'm encountering an issue where the first letter of my result from the Webapi model is always uppercase, even though my Angular model's first letter is lowercase. User.ts export interface User exte ...

What is the process for generating an alert box with protractor?

While conducting tests, I am attempting to trigger an alert pop-up box when transitioning my environment from testing to production while running scripts in Protractor. Can someone assist me with this? ...

Angular renderer's setStyle method does not support the application of linear-gradient

Why won't Angular's renderer2 apply linear-gradient CSS in this code snippet? Can anyone provide insights? export class AppComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} public ngOn ...

Decompressing an array within a function invocation

Is there a method to pass an array's elements as arguments to a function? For instance, in Python I can accomplish this using: user = ["John", "Doe"] def full_name(first_name, last_name): return first_name + last_name Therefore, full_name(*user ...

Bespoke String Implementation

Can someone help me find a dual approach? I am interested in customizing strings based on type. I want to be able to determine the type of a string different from a primitive string during runtime. Take a look at this code: class TZDatabaseName extends ...

When using translate.get with an array of strings in Angular 5, the function will return both the keys and values, not just

Currently, I am utilizing Angular 5 to manage internationalization through ngx-translate within my code. To elaborate on the issue at hand, I have a data table that pulls information from a web service and displays it correctly. There is also a button tha ...

What are the steps to setting up SystemJS with Auth0?

I am having trouble configuring SystemJS for Auth0 (angular2-jwt) and Angular 2.0.0-beta.6 as I keep encountering the following error message: GET http://localhost:3000/angular2/http 404 (Not Found)fetchTextFromURL @ system.src.js:1068(anonymous function) ...

EmotionJS Component library's Component is not able to receive the Theme prop

I am in the process of developing a component library using Emotion and Typescript. However, I have encountered an issue when trying to import the component into a different project that utilizes EmotionJS and NextJS - it does not recognize the Theme prop. ...

Display an array depending on the value in Angular 2 when clicked

In my current Angular 2 project, I am dealing with a .json file structured like this: { "PropertyName": "Occupation", "DefaultPromptText": "occupation text", "ValuePromptText": { "WebDeveloper": "for web developer", "Administra ...

Issue with Angular 6.1.0: Scroll position restoration feature malfunctioning

RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' }) In the latest version 6.1.0, there is a new feature that aims to restore the scroll position after navigation. Unfortunately, I encountered an issue where the scroll restorat ...

Need an email verification request through firebase

Need help with sending email verification upon user sign up. Here is the code in provider/user.ts: onCreate(form: NgForm) { var user = new User(); user.name = form.value.name; user.email = form.value.email; user.contact = form.value.contact; if(form.valu ...

Error: The module 'AppModule' has encountered an unexpected value 'CalendarComponent'. To resolve this issue, please include a @Pipe/@Directive/@Component annotation

Recently, I started working with Angular 2 and wanted to incorporate the 'schedule' feature from Primeng. To do so, I installed its package and added the calendarComponent in my app.module.ts file as shown below: import { BrowserModule } from &a ...

Check the connectivity of Angular 2 application

I currently have an Angular 2 application running on one server, and a Java application on another server. My goal is to be able to ping the Angular application from the Java application in order to check its status (whether it is up or down). Would it b ...

OnDrop event in React is failing to trigger

In my current React + TypeScript project, I am encountering an issue with the onDrop event not working properly. Both onDragEnter and onDragOver functions are functioning as expected. Below is a snippet of the code that I am using: import * as React from ...

Angular component retrieving input value from parent element

I created a basic component that contains two date pickers and a selector named 'app-date-adapter' in its template. <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" #fromDate> <mat-datep ...

Sharing text to a different Angular component

I am working on a list of equipment items, each with its own "Details" button. When this button is clicked, I only want to display information about that specific equipment (using the serial number). How can I pass the serial number when switching between ...

How to associate an object with a component in Angular2/TypeScript using HTTP

I am currently working on displaying a list of item names retrieved from a REST API. By utilizing the map function on the response observable and subscribing to it, I was able to obtain the parsed items object. Now, my challenge is how to bind this object ...

Discovering child elements within an iframe using Angular and customizing their appearance

Is there a simple and effective way to locate child nodes within an iframe using Angular in order to access the HTML element? Currently, I have implemented the following method: I designated a reference variable within my iframe (#privacyPolicy) <ifra ...

Attempting to deactivate the submit button in the absence of any input

As a beginner trying to work with typescript and html, I am facing an issue with disabling the submit button when a user fails to enter a part number. The error message I am getting is "Cannot find name 'partNumber'". Any advice or guidance on th ...

Retrieving data from .NET API in Angular

I'm currently developing a project using Angular 7 and .NET Core. I’m facing an issue with passing file contents from a .NET API to Angular. Here's my API code: public async Task<IActionResult> GetLicenseInformation() { try { ...