How to Apply Filters to *ngFor?

How to Apply Filters to *ngFor?

Angular Basics

As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

Recently, I was looking for the best way to optimize my angular code. I have gone through a lot of articles and as we know it is limitless. Then I thought of consolidating the checklist for writing cleaner code for Angular which helped me and might help others too.

These small articles not only help you to write a better TypeScript or JavaScript Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.

One of the most basic topics in any programming is displaying data from services to the HTML. We do use various techniques to support this. One of the widely used directives for this *ngFor which works like for loop and iterate and display content as needed. What if we want to apply some filter while iterating the data. Let’s see one of the ways to achieve this.

When we have much bigger data and want to filter multiple items in the HTML , It will be like lot of conditions in HTML so it is better to create a pipe which can do a filtering and give us the data.

Let’s check the steps to create the filter pipe.

1. Component

filterargs = {title: 'hello'};
data= [{title: 'test abc'}, {title: 'test cde'}, {title: 'foo bar'}];

2. Template

In your template, you can pass string, number, or object to your pipe to use to filter on:

<li *ngFor="let data of data| filter:filterargs">

typescript javascript angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

JavaScript Vs TypeScript

Get to know here difference between JavaScript & TypeScript, In this blog explained with pros and cons of TypeScript & JavaScript.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Short TypeScript Import Paths in Angular 9

How to setup import path aliases in Angular9 and why you should do it as the first thing for any Angular project. Short TypeScript Import Paths in Angular9

What TypeScript taught me about JavaScript

What TypeScript taught me about JavaScript. TypeScript was designed to make the most sense out of any JavaScript code. How void behaves in both TypeScript and JavaScript. What Symbols are and why they can be unique. Why substitutability is such an important concept for TypeScript