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

Compatible with Angular versions 2 to 9

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 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.

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 the feature section above.

In the 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.

6
Leave a Reply

avatar
4 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
vikasadminAlejandro 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.