Скачать или смотреть Filtering Data From Array in Angular with ngFor

Learn how to effectively filter objects from an array in Angular using `ngFor`. We provide a clear solution for extracting specific elements based on conditions.
---
This video is based on the question https://stackoverflow.com/q/62714275/ asked by the user 'Surya' ( https://stackoverflow.com/u/8169680/ ) and on the answer https://stackoverflow.com/a/62714697/ provided by the user 'Mohamed Aljamil' ( https://stackoverflow.com/u/8932676/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Need to filter some data from Array in Angular while traversing with *ngFor

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Filtering Data From Array in Angular with ngFor

In Angular applications, managing and displaying data stored within arrays is a common task. Sometimes, you may need to filter an array based on certain conditions before rendering it in the UI. In this post, we will address a specific problem: how to filter an array containing objects so that we can display both the first object with "mandatory": false and the first object with "mandatory": true.

The Problem Statement

Consider you have the following array of objects that represents various details about a country:

[[See Video to Reveal this Text or Code Snippet]]

Your goal is to extract:

The first object where "mandatory" is false

The first object where "mandatory" is true

This extracted data will then be displayed in the user interface.

The Solution

Big tasks like data filtering are often best handled in the TypeScript (.ts) file of your Angular component. By creating a function to process the data before it reaches your HTML, you can maintain a cleaner, more manageable codebase.

Step-by-Step Implementation

Define the Array:
You already have your countryDetailsArray as shown above.

Create a Function for Filtering:
This function will iterate over the array and return an array containing the desired objects.

Here’s how you can implement the function:

[[See Video to Reveal this Text or Code Snippet]]

The find method is used to locate the first element that meets the specified condition.

The function logs two entries into a new array, one for each case (mandatory true and false).

Utilize the Function in Your Component:
When you use this function in your component’s logic, you can store its output in a variable that will be used in the template.

Display the Data Using ngFor:
Now that you have the filtered data, you can iterate over it in your component's template.

Here’s an example of how to set this up in your HTML:

[[See Video to Reveal this Text or Code Snippet]]

The *ngFor directive will process the array returned by getFirstOfEach(), creating a button for each entry.

Conclusion

Filtering data from an array in Angular using ngFor does not have to be complex. By processing the data in your TypeScript file with a dedicated function, you keep your HTML clean and focused solely on presentation. In this guide, we walked through how to find both mandatory and non-mandatory entries from an array and display them seamlessly.

If you're looking for more tips and tricks on managing data in Angular, stay tuned for our next post!