Tips for using an angular filter pipe to find the precise word instead of just matching values

For instance, if a search for [App] is executed, the desired result should only show [App] and not include [Apple, Appliance, Appliances].

    @Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any, filter: any, isAnd: bool): any {
    if (filter && Array.isArray(items)) {
      let filterKeys = Object.keys(filter);
      if (isAnd) {
        return items.filter(item =>
            filterKeys.reduce((memo, keyName) =>
                (memo && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === "", true));
      } else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            console.log(keyName);
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === "";
          });
        });
      }
    } else {
      return items;
    }
  }
}

Answer №1

To replace the action of

new RegExp(filter[keyName], 'gi').test(item[keyName]))
, it is necessary to use
filter[keyName] === item[keyName]
. I trust this solution will be beneficial.

Answer №2

I believe the success of this code is evident

export class FilterPipe implements PipeTransform {
  transform(items: any, filter: any, isAnd: bool): any {
    if (filter && Array.isArray(items)) {
      return filter.map(filterItem => items.filter(itemItem => itemItem === filterItem).join())
    } else {
      return items;
    }
  }
}

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

Creating a Bottom Sliding Menu in Ionic 2

Hey there! I'm working on something that might not fit the typical definition of a sliding menu. It's not for navigation purposes, but rather to house some data. My idea for this actually comes from Apple Maps: https://i.stack.imgur.com/hL1RU.jp ...

Error message: It seems that in Angular Universal, the function readFile$().mergeMap is not recognized

Currently, I am integrating Angular Universal server-side rendering into an existing Angular 7 application. As part of this process, I am also attempting to make it work with Firebase. However, in the functions log within the Firebase console, I am encount ...

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

I am currently working with a multi-dimensional array that has two keys, and it is structured as follows: user: any = {}; // The index is incremented within a for loop to add values to the user object (this part is functioning correctly) this.user[index++ ...

A guide on transferring received data from dataService within the parent component to the child component in Angular2

Within the context of my application, there exists a parent component named app-parent and a child component called app-child. In app-parent, I retrieve data from a DataService. @Component({ selector: 'app-parent', providers: [DataService] ...

nodemon failing to automatically refresh files in typescript projects

I am currently developing an app using NodeJs, express, typescript, and nodemon. However, I am encountering an issue where the page does not refresh when I make changes to the ts files. Is there a way for me to automatically compile the ts files to js an ...

Is there intellisense support for Angular 2 templates in Visual Studio?

Is it possible for Visual Studio to provide autocomplete suggestions for properties of a Typescript component within a separate HTML view template? ...

Exploring the process of linking a C# REST API to an Ionic 2 mobile application

I am completely lost on how to connect an asp.net web api with my ionic 2 mobile app. Any help or advice on resolving this problem would be greatly valued! ...

The Ionic framework is encountering difficulties in resolving all parameters for the service

I have created an IncomeTempService: import {incomeService} from "./income.service"; export class incomeTempService { private incomeTmp: {value: number, usage: string, date: string}; private value = null; private usage = null; constructor(priva ...

Arrange the items that are missing from Array B to be located at the bottom of Array A, organized in a file tree structure

I have two arrays containing different types of objects. Each object in the arrays has a title assigned to it. My goal is to compare these two arrays based on their titles and move any files that are not included in the bottom part of the fileStructure arr ...

The error message "Property 'id' is missing on type 'T'" is indicating the absence of the 'id' property in the

I am currently working on a React component that serves as a table and is designed to handle various types of data. The structure of the component is defined as follows: type SimpleTableProps<T> = { data: Array<T>; ... }; const SimpleTabl ...

Switch out the checkbox for a span for a different approach

Working with Angular 9 reactive forms, I am currently using the following form setup: <form [formGroup]="form" (ngSubmit)="onSubmit()"> <label for="active">Active</label> <input id="active" type="checkbox" formCo ...

Ways to broaden your understanding of TypeScript's latest inheritance features

How can I ensure that TypeScript is aware of all the inheritances that occur in the Base variable of the Factory class so that I don't encounter any errors? It seems like there should be a way to achieve this since I do get the desired result in the e ...

The Angular application is encountering difficulty accessing the Django Rest Framework API due to a CORS problem

Encountering a CORS problem while trying to access a Django Rest Framework REST API from an Angular 6 application. The API is hosted at http://localhost:55098/admin. It functions properly when accessed with Insomnia. The Angular app is running on http://l ...

How to access a component attribute in a JavaScript library method in Angular 8

Within my Angular project, I am utilizing Semantic UI with the code snippet below: componentProperty: boolean = false; ngOnInit() { (<any>$('.ui.dropdown')).dropdown(); (<any>$('.ui.input')).popup({ ...

The pre 'remove' Mongoose Middleware fails to execute, resulting in an error stating that Model.update is not recognized as a function

I have a middleware query set up for managing a Book schema: var mongoose = require('mongoose'); var Schema = mongoose.Schema; var User= require('./user'); var schema = new Schema({ name : {type: String, required:true}, start ...

Testing a close function in a modal using Karma-jasmine

Testing is new to me and I'm looking to test the close function and see if it renders properly in Angular. Here's the HTML structure: <div class="modal active" *ngIf="active" id="modal"> <div class=" ...

Deactivating Bootstrap Modal in Angular

Looking for advice on managing a Bootstrap Modal in Angular 7 I have a Form inside a Bootstrap Modal that I need to reset when the modal is closed (by clicking outside of it). Despite searching on Google, I haven't been able to find a solution. Any ...

Tips for changing input field type from "password" to "text" in Angular?

Is there a way to dynamically convert an input field with type="password" to type="text" in Angular? In my demo, I have two input fields labeled Mobile no and Re-enter mobile number. I want these fields to change to type="text" if the user inputs the same ...

Is it necessary to install ng-bootstrap if my project was built using the Bootstrap 4 alpha theme in Angular 4?

I am currently utilizing the SB-Admin-BS4-Angular-4-master theme in Angular 4. The theme includes a link to . My goal is to implement Bootstrap modals in my code. Following the documentation provided in the theme, I integrated the modals as per instruction ...

Utilize animated angular components to create an engaging background for your design

I have the code snippet below in my app.component.ts file: <mat-toolbar color="primary">My Application</mat-toolbar> <router-outlet></router-outlet> <particles [style]="style" [width]="width" [height]="height" [params]="params"& ...