Angular 7/6 + Typescript: Create Filter List with Check-boxes to Select from List

Compatible with Angular versions 2 to 7

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


  1. Filter from the list using 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. Clear cross icon on search input to clear search term.
  5. “Clear Selection” to clear all selections by the user.
  6. An individual tag can be deleted using the cross icon on respective tags.

The complete version will look something like this:

You can try the demo here.

Step 1 – Create a filter “pipe” to Filter List

Create a file “filter.pipe.ts” with having below code:


Step 2 – Include filter in main.ts file

Import filter.pipe.ts in main.ts file.


Step 3 – Let’s create an app.ts file, which will have important logical functions explained in feature section above.

In above code, every function is commented and self-explanatory. Let me know if you have any questions regarding code flow.

Find Source code in GitHub

UPDATE: See upgraded version on this example in Angular 6, having data sharing between components and routes example, usage of services and @Input decorator in Angular 6.

5 thoughts on “Angular 7/6 + Typescript: Create Filter List with Check-boxes to Select from List”

Leave a Reply

Your email address will not be published. Required fields are marked *