Exploring in Angular 2 by using First Name, Last Name, and Email for queries

Details

Currently, I am working on implementing a search functionality using pipes. Users should be able to search by email, first name, or last name. At the moment, it only works for searching by email. I am looking to extend this capability so that users can search using any of these three criteria.

Image

https://i.sstatic.net/pnteM.png

Custom Search Pipe

import {Pipe} from '@angular/core';


@Pipe({
    name: "search"
})

export class SearchPipe {

    transform(value, term) {
        console.log(term + ' ' + value);
        if (term == null) {
            return null;
        }
        return value.filter((item) => item.Email.includes(term));
    }
}

Response

{
    "Id":1,
    "ApimId":"1",
    "FirstName":"Super",
    "LastName":"Admin","
    "Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecfc6c3cbcaeec9c3cfc7c280cdc1c3">[email protected]</a>"   
}

Answer №1

The most challenging part has been completed, now simply update your pipe to filter based on email, first name, or last name

import {Pipe} from '@angular/core';

@Pipe({
    name: "search"
})

export class SearchPipe {

    transform(value, term) {
        console.log(term + ' ' + value);
        if (term == null) {
            return null;
        }
        return value.filter((item) => {
            return item.Email.includes(term) || item.FirstName.includes(term) || item.LastName.includes(term);
        });
    }
}

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

Tips for updating an Observable array in Angular 4 using RxJS

Within the service class, I have defined a property like this: articles: Observable<Article[]>; This property is populated by calling the getArticles() function which uses the conventional http.get().map() approach. Now, my query is about manually ...

When running `ng build --prod`, an error is thrown indicating that the module does not have

Whenever I try to build in Azure, I encounter an error. However, locally the command 'ng build --prod' works perfectly fine. Error: Module [path_to_file] has no static exports true Since this is for production purposes, I am hesitant to use t ...

The evaluation of mongodb-memory-server is experiencing issues with either failing or timing out

While setting up mongodb-memory-server in my backend for testing purposes, I encountered some issues during test execution that require debugging. The problem arises when running a test that creates a MongoDB document within the service being tested, leadi ...

Designing a visual showcase with interactive tab links for image selection

I have been working on developing an Angular component that simulates a tab gallery functionality, inspired by this example. Below is my HTML structure: <div class="gallery-container"> <div class="display-container"> ...

Utilize Angular roles to sort and organize website data

Exploring the utilization of login roles in my Angular SPA application which operates solely on the client side, integrated with Spring Security and Spring Boot. I have concerns about potential unauthorized access by a skilled developer who could manipula ...

What is the best way to ensure the secure signing of a transaction in my Solana decentralized application (

I am currently involved in an NFT project that recently experienced a security breach, and I am developing a dapp to rectify the situation. Our plan is to eliminate all NFTs from the compromised collection and issue a new set of NFTs using our updated auth ...

Strange actions observed in JavaScript addition operations

In my Angular application, I have the following TypeScript function: countTotal() { this.total = this.num1 + this.num2 } The value of num1 is 110.84 and the value of num2 is 5.54. I determined these values by watching this.num1 and this.num2 in the C ...

I am deciding between using CommonJS or ES module for my sub packages in a Yarn workspace for my Next.js project. Which one

Currently working on a Next.js monorepo project using TypeScript and yarn workspace. Within the yarn workspace, there are two packages: /web and /api. The /web package is a next.js project, while /api serves as a shared subpackage utilized by /web. /my-pr ...

How to troubleshoot the issue of "Error: (SystemJS) module is not defined" in Angular 2?

I am a beginner in the world of Angular2. It is known that in Angular2, there is a way to reference a file using a relative path by defining moduleId : module.id in the component meta data. However, I have tried doing it this way and keep encountering the ...

Is there a way to include a message in browser.wait() without altering the preset timeout value?

I have encountered an issue with my code: browser.wait(ExpectedConditions.presenceOf(elementName)); Unfortunately, this often fails and only provides the vague message "expected true to be false", which is quite frustrating. When it fails, I need a more ...

Unexpected patterns observed when utilizing parent/child routing files

I am working with a Node/Express backend that is implemented using TypeScript. Whenever I make changes to a file and save it, if I test the root route in Postman localhost:8000/, I receive the expected response. However, when I test localhost:8000/user af ...

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...

Using 3 dots argument in Angular 5 to assign values to an array

I stumbled upon this line of code in Angular. Can someone explain its meaning? this.columns = [...this.columns, col]; My guess is that this relates to the immutable concept of arrays. ...

Acquire information using AngularJS

This is a demonstration of my service: import { Injectable } from '@angular/core'; import { GenericPostService } from 'app/shared/services/generic.post.service'; @Injectable({ providedIn: 'root' }) export class FaqServic ...

Grid layout with Tailwind

I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS. The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, fo ...

When I attempt to make an HTTP request in Angular, I can see my x-access-token, but for some reason the request is coming back

https://i.sstatic.net/bh3sa.png onTable(){ let headers = new HttpHeaders(); //headers.set('Content-Type', 'application/json'); //headers.set('x-access-token', this.token).set('Content-Type', 'application/json&ap ...

Yup will throw an error if both a minimum value is set and the field is also marked

I am attempting to validate my schema using yup: import * as yup from "yup"; let schema = yup.object().shape({ name: yup.string().min(5) }); const x = { name: "" }; // Check validity schema .validate(x, { abortEarly: false }) . ...

Error message from Angular development server: Channel is reporting an error in handling the response. The UNK/SW_UNREACHABLE options

After recently installing a new Angular app, I encountered an issue while running 'ng serve'. The application initially loads without any problems, but after a few seconds, I started seeing a strange error in the console. Channel: Error in handle ...

The function that iterates through the 'categoria' state and returns a new array is not functioning properly

Having difficulty with the object of a function using .map(). It works when the code is used directly, but not when put inside a function. For example: if(this.state.cat){ return _.map(this.state.cat, categoria => { if(this.state.search_ ...