Ionic: Employ the `[hidden]` attribute to conceal elements that do not include the specified string

I am encountering an issue with a variable that is holding a textfield value

 this.search_value = null;

Next, I have a list made up of cards:

<div *ngFor="let i of lotes" class="card">

   <div [hidden]="(this.search_value && this.search_value.trim()) || i.nome_lote.includes(this.search_value) ">
   ...
   </div>

</div

My intention is to hide the cards that do not contain the this.search_value string within their i.nome_lote value.

Upon typing in the search field, the search_value variable is updating correctly.

However, it seems like nothing or everything is being hidden at once... It does not seem to be considering the condition for the string containing.

Could I possibly be making a mistake? Is there a better approach to achieve this?

angulartypescriptionic-framework

Answer №1

The condition you are using is incorrect. By utilizing the or operator, when search_value has a value, everything will be hidden and the second condition won't even be evaluated. To rectify this issue, you should use the and operator, specifically &&. Additionally, ensure that 

i.nome_lote.includes(search_value)
is not truthy, as it would otherwise be hidden if the condition is true. Update your code to:

<div [hidden]="search_value && !i.nome_lote.includes(search_value)">

Check out the updated code on StackBlitz

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

Launching in dynamically loaded modules with bootstrapping

The Angular Guide explains that during the bootstrapping process, components listed in the bootstrap array are created and inserted into the browser DOM. However, I have noticed that I am unable to bootstrap components in my lazy loaded feature modules. E ...

angular

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...

htmlangular

Guide on utilizing external namespaces to define types in TypeScript and TSX

In my current project, I am working with scripts from Google and Facebook (as well as other external scripts like Intercom) in TypeScript by loading them through a script tag. However, I have encountered issues with most of them because I do not have acces ...

typescriptfacebook-javascript-sdk

Getting an error when running forEach() on div elements in JavaScript

I am facing an issue with changing the height of divs in an array. Even though I am able to log the names of the divs correctly, when I try to set their height, I encounter a "this is undefined" error message in the console. Despite successfully logging a ...

javascriptangular

Loop through the coefficients of a polynomial created from a string using JavaScript

Summary: Seeking a method to generate a polynomial from specified coordinates, enabling coefficient iteration and optional point evaluation I am currently developing a basic JavaScript/TypeScript algorithm for KZG commitments, which involves multiplying c ...

javascripttypescriptalgorithmpolynomialselliptic-curve

Issue with Google Oauth2 authentication not providing Refresh token after successful authentication

When creating an authentication module for my Angular2 Web application using the Oauth2 Google+ API, I encountered an issue with the Google server response. Despite adding parameters to the POST query and attempting to revoke access and try again, the resp ...

google-apiangulargoogle-oauth

How can a function be properly exported and referenced within a user-defined class using the Ionic/Angular CLI version 5.4.16?

I recently delved into coding just a week ago and am currently working on incorporating two buttons into my Ionic app. The first button is meant to trigger an action sheet, while the second should activate an alert. I have been following the official Ionic ...

angularionic-framework

Having difficulty accessing precise user information (Nestjs, TypeORM)

Encountering an issue with retrieving specific user data. When saving, a user object and an array of IDs are obtained. The database saving process is successful; however, upon retrieval, not all columns (specifically userId and assetId) are included in the ...

typescriptpostgresqlnestjstypeorm

In Angular 4, I encountered an issue where adjusting the height of the navigation bar caused the toggle button to no longer expand the menu in Bootstrap

In the process of developing an angular application, I encountered a situation where I needed to adjust the height of the nav bar using style properties. After making the necessary changes, everything was working fine. However, a problem arose when I mini ...

angulartypescriptbootstrap-4

Display the value function within an Angular template

I am attempting to calculate the sum of a value in an array obtained from an HTTP GET method and a subscribe function. I want to display the result in the HTML but it is not working. I really hope someone can assist me with this because I am stuck. Here ...

typescript

I have employed the identical syntax in another child component, yet the error does not manifest there. Any ideas on how to resolve this issue?

The error can be found by clicking here Here is the code that is causing the error the data variable seems to be correct, but I am unsure about the syntax. I am not sure how to resolve this issue. I would like the details to be displayed in a table for ...

angularangular-materialangularjs-directive

The property 'supabaseUrl' cannot be destructured from 'getConfig(...)' because it is not defined

I recently went through the tutorial provided by @supabase/auth-helpers-sveltekit on integrating supabase-auth helpers with sveltekit. However, upon running the development server, I encountered an internal error. Cannot destructure property 'supabas ...

typescriptauthenticationsveltekitsupabase

The @Input decorator in Angular 2/4 is designed to only transfer fundamental values and not collections or complex data

I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...

javascripthtmlangularinput

React: a versatile and type-specific onChange() function

After adding as HTMLInputElement, the error message of Property 'checked' does not exist on type 'EventTarget & (HTMLInputElement | HTMLTextAreaElement)' is resolved. However, I find it interesting that TypeScript doesn't autom ...

reactjstypescriptonchange

Is there a quicker way to make the same type of arguments?

function setMyColor(r:number, g:number, b:number, a:number) { ... } This format is not what I'm looking for. interface MyColor { r:number; g:number; b:number; a:number; } Is there a more concise method to type the arguments itera ...

typescript

Tips on transforming current JSON into an alternate JSON format

Using React with TypeScript, I have a JSON data set of employees categorized by their department. Here's a snippet of the JSON data: [ { "department": 1, "name": "Test", "age": 32, "contact": 242222120, "id": 1 }, { "department": 1, "name": "Te ...

reactjsjsontypescript

Mouseout event fails to trigger on objects that disappear

Look at the action in the GIF below A Font Awesome icon changes when you hover over it using mouseenter() and mouseout() Clicking a button hides the icons and shows new elements. When reverting back to show the old elements, since the mouse never technica ...

angularmouseovermouseleave

Data from graphql is not being received in Next.js

I decided to replicate reddit using Next.js and incorporating stepzen for graphql integration. I have successfully directed it to a specific page based on the slug, but unfortunately, I am facing an issue with retrieving the post information. import { use ...

reactjstypescriptnext.jsgraphqlapollo

How to Build a Number Spinner Using Angular Material?

Is there a number spinner in Angular Material? I attempted to use the code provided in this question's demo: <mat-form-field> <input type="number" class="form-control" matInput name="valu ...

htmlangularangular-material

Angular: merging multiple Subscriptions into one

My goal is to fulfill multiple requests and consolidate the outcomes. I maintain a list of outfits which may include IDs of clothing items. Upon loading the page, I aim to retrieve the clothes from a server using these IDs, resulting in an observable for e ...

htmlangulartypescript