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.

Features:

  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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

5
Leave a Reply

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
adminAlejandro AlmanzaKamlesh Katpara Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Kamlesh Katpara
Guest
Kamlesh Katpara

Hi,

How can I use / pass ‘selected_games’ to a different component ?

Alejandro Almanza
Guest
Alejandro Almanza

This was a lot of help for me. Thanks!!

vikas
Guest
vikas

it.name is undefined this error come in filter.pipe.ts file.