How can I reduce unnecessary spacing in a primeNg Dropdown (p-dropdown) filter within an Angular 5 application?

In my Angular 5 project, I have implemented PrimeNG dropdown (p-dropdown) and encountered an issue. When I try to filter the dropdown data by adding spaces before and after the search term, it displays a No Results Found message. How can I fix this problem?

For example, if I search for "India" with spaces surrounding the term in the country dropdown, the p-dropdown shows a No Results Found message.

My goal is to trim() the searched string in the PrimeNG p-dropdown filter.

Below is the HTML code for the p-dropdown:

<p-dropdown (onChange)="checkType(model.transectionType)" *ngIf="availableBalance != 0.00" (keydown)="onKeyUp($event)" [style]="{'width':'100%'}" [options]="transectionType" [filter] = "true"
            [resetFilterOnHide] = "true" [(ngModel)]="model.transectionType" 
            [formControl]="form.controls['transectionType']" placeholder="Select a Transaction type" 
            optionLabel="value"></p-dropdown>
angulartypescriptangular5dropdownprimeng

Answer №1

After much exploration, I have unraveled the solution to this complex issue. The crux of the matter lies in the usage of <p-dropdown> in our Angular application with the attribute [filter]="true". This triggers the keydown method for filtering, which is defined in ng_modules->primeng->components->dropdown->dropdown.js. To properly trim the searched/filter value from both the right and left sides, we must use the .trim() method on inputValue like so: 

this.filterValue = inputValue.trim();

It would be beneficial for Primeng to incorporate this functionality directly into their core code for dropdowns, eliminating the need for additional fixes and preventing similar issues from arising in the future.

Answer №2

When using primeng version 15 with angular version 15 :

Here is the code in the html file:

<p-dropdown (onFilter)="onFilter($event)" [filterValue]="filterValue">

And here is the corresponding code in the ts file:

filterValue: string = '';
onFilter(event) {
    this.filterValue = '';
    this.filterValue = CommonHelper.CorrectWrongCharacters(event.filter);
}

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

Using Angular: How to set the index value from a dropdown to a local variable after a button is clicked

Can someone please provide guidance on how to assign the index value (i = index) to EmployeeIndex: any; after a button click event? Your suggestions are greatly appreciated. Here is my code: HTML <select class="form-control" [(ngModel)]="EmployeeNam ...

angulartypescript

The Void Ionic type does not have the specified property available

Struggling to load markers when the button is clicked to find nearby gyms. Despite loading the map to my location upon click, no markers are displayed and an error indicating that then does not exist on type 'void' within IonViewDidLoad. gyms.ht ...

angulargoogle-mapstypescriptionic-frameworkionic3

Utilizing directives while initiating dynamic components

I've been exploring the capabilities of dynamically creating components using the ComponentFactoryResolver. const factory = this.componentFactoryResolver.resolveComponentFactory(FooComponent); const component = this.templateRoot. ...

javascriptangular

Upgrade Angular 8 by substituting interconnected filter and order pipelines with custom functions

According to the Angular documentation Filtering and sorting operations can be resource-intensive. When Angular invokes these pipe methods frequently, it can lead to a degraded user experience, especially with even moderately-sized lists. Misuse of filt ...

angulartypescript

Mapping two objects of the same shape to each other recursively using TypeScript

I receive regular data from a specific source. This data consists of nested objects containing numerical values. For example: { a: 1, b: { c: 2, d: 3.1, }, } My objective is to organize this data into multiple TimeSeries objects of the same struct ...

typescripttypes

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

I am currently working on an application that utilizes a component called "dropdown-component" throughout its pages. However, due to specific business requirements, I have been tasked with replacing "dropdown-component" with "custom-dropdown-component". Un ...

htmlangulartypescript

What could be causing the index.tsx file to not locate the Clock Module?

Here is the code snippet I have in my index.tsx file. import Clock from "./utility/clock"; And this is my tsconfig setup. { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "es6", "target": "es5", ...

typescriptwebpack

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

javascriptcssangulartypescript

In the context of NextJs, the req.body is treated as an object within the middleware, but transforms

Here is the middleware function responsible for handling the origin and CORS: export async function middleware(request: NextRequest) { const requestHeaders = new Headers(request.headers) const origin = requestHeaders.get('origin') ?? '& ...

javascriptreactjstypescriptnext.js

Getting a TypeError following the execution of 'npm update' and 'ng build -prod' commands

Recently, I updated my npm modules and attempted to run ng build -prod, a command that had previously been running smoothly. However, I encountered the following error: TypeError: extractedChunk.getNumberOfModules is not a function at ExtractTextPlugi ...

angularnpmangular-cli

Is there a way to determine the total number of angular components in my app using IntelliJ IDE?

Seeking a way to determine the total count of angular components using IntelliJ IDE. I attempted 'find in files' search tool with the terms "export class" but it retrieved more than just component files. Appreciate any help! =) Etienne. ...

angularintellij-ideafindcomponents

Error Encountered during Compilation of React TypesIs this okay

Currently, I am working on an MVC project that involves the use of TypeScript. To access the types required for this project, I have also integrated React. To obtain the React types, I performed an npm install --save-dev @types/react (similarly for react-d ...

reactjstypescriptnpmnpm-install

To ensure the specificity selector for material UI in React, it is essential to include an empty CSS definition

The styling for the unselected toggle button is working smoothly. However, when you don't define an empty class selector, the style of the selected toggle button does not show: ./App.js import * as React from "react"; { render ...

reactjstypescriptmaterial-uijss

Ways to rename a sequelize property following a join operation

I am encountering a problem with sequelize ORM. The data returned after joining has a nested object: { "id": 1, "username": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4125342e2f26252e282220 ...

node.jstypescriptdatabasesequelize.jssequelize-typescript

Error message pops up in WebStorm when attempting to access the map object in Angular

Within one of the services in my Angular application, I have utilized the map() function to retrieve data from the GitHub API. getUser(username: string) { // Regular Expression used for String Manipulation return this.http.get('https://api.github.com ...

angulartypescriptwebstorm

Typescript fails to identify the parameter type of callbacks

I am facing a challenge with the function below and its callback type: type Callbacks = { onSuccess: (a: string) => void; }; function myFunction(event: string, ...args: [...any, Callbacks]) { } The function works correctly except for one issue - ...

typescript

Tips for monitoring changes to files while developing a NestJs application within a Docker container

Having an issue with NestJS and Docker here. Trying to run the development script using npm start: dev, but encountering a problem where the app runs fine but doesn't detect any changes in the source files, hindering the development process. Here&apo ...

typescriptdockerdocker-composenestjs

Issue encountered in ../../../../ Unable to locate namespace 'Sizzle'

Following the execution of npm install @types/jquery, I encountered a compilation issue while running my Angular project with ng serve ERROR in ../../../../../../AppData/Roaming/JetBrains/WebStorm2020.1/javascript/extLibs/global-types/node_modules/@types/j ...

jqueryangulartypescriptnpm

Angular ensures that the script is loaded only once

Here's a piece of code I wrote: ngOnInit() { this.loadScript('./assets/js/jquery.dataTables.min.js'); this.loadScript('./assets/js/datatable.js'); this.loadScript('./assets/js/common.js'); } Every time the page ...

angular

Is there a way to dynamically transfer projected content to child components without using <ng-content> for rendering?

Let's say I have a <hook> component that dynamically creates a child, how can I transfer the content (which Angular would usually render inside a <ng-content></ng-content> in the hook's template) as ng-content to that child comp ...

angularng-contentangular-content-projection