angular 4 search filter pipe

Angular 9|8|7 Search Pipe Filter using ng2-search-filter Quick Example Tutorial

by

In this Angular tutorial, we’ll learn how to implement a filter search on a dataset using a pipe filter with the help of ng2-search-filter. This package helps to filter out a collection provided as a source in the *ngFor directive.

Sometimes we may have a long list of items or data in tabular form which is added on the component for users. In that case, adding a simple filter search bar can prove a boon for a user to filter the required set of information.

The ng2-search-filter package provides a ready to use pipe filter to add search functionality nearly to any type of object data collection. We don’t need to create a separate pipe filter and import it on every module to use.

This package is very easy to use and implement.

Here we will look into the steps required to install the ng2-search-filter package and usage tutorial with some more tricks and tips.

Read more

Angular 9|8 + Typescript: Create Filter List with Check-boxes to Select from List

by

Compatible with Angular versions 2,4,5,6,7,8 & 9

Hi Guys, here we will create a list of items with a filter using Angular and Typescript. For filtering list data we will use Pipes.

Features:

  1. Filter from the list using the input search form field.
  2. Use the checkbox to select a game from the populated list.
  3. Selected game tags will be added below the list items.
  4. A clear cross icon on search input to clear the search terms.
  5. “Clear Selection” to clear all selections by the user.
  6. An individual tag can be deleted using the cross icon on respective tags.

Read more