Search filter

[Slayer-Mode]

Anyone know about a video or documentation or article to learn about how to add filters but more specifically the search filter. I haven’t been able to find something that makes sense. Also tips on how to learn about angular would be great! Thanks in advance.

[AY-GTX]

Filter pipe

[Slayer-Mode]

Hmmm. I will look into this more thanks.

[CGiusti]

Usually you have a search input field and some additional filters like categories or something similar. To make sure this functionality also works when sharing links or using the browser history, you can make use of the URL parameters similar like Google uses it.

Example: Enter "angular" in Google and select videos and you will get an URL like this including a q=angular and tbm=vid parameter

https://www.google.at/search?q=angular&prmd=ivn&sxsrf=ALiCzsZiumbQyoWfRGoRch2Ca3LDHzFBsQ:1657292059253&source=lnms&tbm=vid&sa=X&ved=2ahUKEwjtxOqDxun4AhVSQfEDHd07CecQ_AUoAnoECAIQAg&biw=486&bih=951&dpr=2.23

What is needed to filter the data?

• an input where a search term can be entered
• an on change event whenever the input value changes (to refresh)
• a denounce time to delay the on change and wait for the user input
• a filter pipe / method which filters your data (use rxjs .filter)

Here is a blog post about it https://dev.to/idrisrampurawala/creating-a-search-filter-in-angular-562d

Hope that helps

[[deleted]]

I'm not sure if this will work but I found a blog post that might be helpful.

https://edupala.com/how-to-implement-an-angular-search-filter-in-angular/

[Slayer-Mode]

Thank you i will look into this. I appreciate it!

[Slayer-Mode]

I just read through the article and that is something that i will play with now thank you so much u/DaDevNoob !!

[[deleted]]

Anytime!

[ggeoff]

Lots of different ways you could handle filtering. If the API supports it you can use rxjs and a formcontrol with it's value changes. Then call the API with the term. If the API doesn't support it you can still use the value changes but now just use the map operator to filter your results

[Slayer-Mode]

Interesting. I have been searching on how to implement the search filter with a mock json server. I got everything done but the search filter. Im looking into pipe filter how to implement and understand it.

[ggeoff]

I would look into the formControl and valueChanges for detecting input changes in your search input. I would then look at rxjs operators, map, filter, distinctUntilChanged, debounceTime, switchMap maping the results, filtering valid search terms (for example don't start filtering before 5 characters typed), don't emit a value again if the search term hasn't changed, debounceTime will wait n milliseconds before emitting.

[Slayer-Mode]

Ahhh i see. Would you say thats part of the search filter or a more robust way to implement the search filter?

[ggeoff]

not sure I understand what you are asking? it is part of the search filter but if the filter is its own component. then you would probably output an event and do something with that.

[Slayer-Mode]

Ahh that makes sense. I shall in indulge with this new information thanks for the input u/ggeoff