Add Filtering and Sorting using angular pipes

[@iUmerFarooq]

Neatly explained. Thank you very much Sir Lots of Love from Pakistan

[@tadaaa.6580]

Thank you sir! The way you explain this filtering and sorting is clear like water

[@StudyMash]

Glad to hear that buddy

[@SoraRaida]

Thanks a lot for this! Definitely saved me

[@lipunpatel5937]

Nice tutorials, very informative, Thank you Sir

[@MrArdo-branch-main]

OMG I hope my teacher can teach like this..Thank you so much sir.. my teacher: 1 year vs Study Mach: 30 minutes ;p

[@StudyMash]

Great

[@missphantomhive2796]

Loving this channel and the videos! Thanks a lot sir!

[@StudyMash]

Glad to hear that you are loving it, thanks for taking time out for appreciation.

[@poonamchaurasia2484]

Great videos thanks a lot Sir 🙂

[@vaishalir7323]

superb,great video

[@vaishalir7323]

Coding : Angular Problem statement 1. Build a production ready angular app, which has a dropdown with a list of users sorted in Alphabetical order. ( Use API 1: reqres.in/api/users?page=1) 2. On click of one of the items display the user details in a new page as label and value ( Use API 2: reqres.in/api/users/) 3. Use separate component for dropdown and display of user details API 1 : reqres.in/api/users?page=1 API 2 :reqres.in/api/users/ 4. Write a sample unit Test case & End to end test cases for the same

[@arunsarkar5573]

After i watche this video i just go for subscribe its owesom 👌.

[@silkchannel4780]

Amazing 👌👌

[@oliverdjbrown]

change from if (item[propName] === filterString) { resultArray.push(item); } to if (item[propName].toLocaleLowerCase() === filterString.toLocaleLowerCase()) { resultArray.push(item); } so you can filter low and upper case

[@StudyMash]

Great, thanks for sharing this

[@cherrbatac7721]

@@StudyMash Pretty new to filter with pipe. Can you show how I can remove duplicates from view using buttons? Like let's say in this instance. It can NY can print or output twice. What if I want a button showing NY and then filter your results to show NY only when that button is clicked. Are you able to help :)? It would be much appreciated. I've trying to find a solution for this, but can't find any. THank you.

[@rahulthawani1104]

hi sir I have one query that ....in sort pipe why we have taken value: Array as string of array i have console log this value argument which is IPropertyBase object not array of string. How is it possible. 0: {Id: 3, SellRent: 1, Name: 'Gun Hill', PType: 'House', BHK: 3, …} 1: {Id: 4, SellRent: 1, Name: 'Macro Home', PType: 'Duplex', BHK: 4, …}

[@chebbitaha8293]

thnxxxxx u r the best

[@greencoder3795]

Sir how to clear filter applied on kendo grid when click on clearfilter button ?

[@scottmacintyre7385]

Great tutorial! I'm using an observable data array in my table . Your code doesn't seem to work with "async". Any suggestions of how to get it to work?

[@rodrogo3029]

Hello sir, how are you? great video! One question though... Do you know if we can filter a city LIKE some portion of the city name? For example if we search for "new" it retrieve New York as posible result (Yes the upper case was intencional) Thanks in advance

[@ravv27]

Hey Rodrogo, I have the same question as you...did you guys manage to find a solution for it? thanks

[@tadaaa.6580]

@@ravv27 actually you can set it to lower/ upper case before filter it. From Saibel answer: for (const item of value) { let lowerProperty = item[propertyName]?.toLowerCase(); let lowerFilter = filterString?.toLowerCase(); if (lowerProperty?.includes(lowerFilter)) resultArray.push(item); }

[@mohit-1-8]

Which extension did you used, to generate the pipes?

[@StudyMash]

here are the extensions i have used in this project : kzbin.info/www/bejne/nZTbpHeedqySjZo Let me know if you still have any question

[@Tournesol143]

Were you going to add a link for unknown vs any?

[@StudyMash]

Not sure how the link was deleted from video description, I have added the same back.

[@Tournesol143]

@@StudyMash Many thanks, Sandeep!

[@Pragya_Empower_Studies]

thanks you so much...

[@StudyMash]

Welcome Pragya. 5AM club, I read this book last week only 😀

[@valerigelovani8794]

tnx Mash

[@NayanJoshi24]

Hi , I have one doubt we have not passed the array(first arg) to transform method filter. In my case it is not able to find the value of type any[] , as we are not passing . So it is not giving me any result. Please suggest what needs to be done.

[@StudyMash]

You means, you are not getting any results on load and when you type the desired city, it is appearing in results?

[@NayanJoshi24]

Yes I am getting zero result, when tried debugging i found it is iterating over empty array. I am working similar site nit the same example which you have shown. In my case we are getting the array/data from api through service and is currently displaying on load but filter is not working if i use pipe filter with only 2 value pass “filterstring” and “attributid”

[@StudyMash]

If you can send me code on [e-mail], I can look it where the issue is

[@NayanJoshi24]

Study Mash sure thanks!

[@yosephkefale2041]

Hey mash , i am really in love ith this tutorial but now while working on pipes , i am facing error 'Expected 3 arguments, but got 2.' on my property-list component , while adding the filter to the ngfor any advice

[@StudyMash]

Hi Yoseph, glad to hear you are liking it, could you please provide me the github link to your code so that I can look at the problem

[@YarikASMRPOMIRCHIY]

how have you fixed it? facing the same error

[@honeymilktea07]

I too am getting the same error, how did you solve it?

[@saipriyagoud4777]

I am not able to sort the data which I have taken from json. Can you please help

[@StudyMash]

Definitely, can you share the github link of your code so that I can look where the issue is?

[@greencoder3795]

Can u send me the code to clear filter of kendo grid when clicking on clear filter button

[@StudyMash]

Sorry, I have no idea about it

[@klbaiju]

Filter is not working properly iam getting this error core.js:4197 ERROR TypeError: value is not iterable at FilterPipe.transform (filter.pipe.ts:16) at pureFunction3Internal (core.js:24548) at Module.ɵɵpipeBind3 (core.js:24714) at PropertyListComponent_Template (property-list.component.html:2) at executeTemplate (core.js:7303) at refreshView (core.js:7172) at refreshComponent (core.js:8326) at refreshChildComponents (core.js:6965) at refreshView (core.js:7222) at refreshEmbeddedViews (core.js:8280)

[@eswar338]

Sorting and Searching working but I am getting below errors in the console ERROR TypeError: Cannot read property 'length' of undefined core.js:4197 ERROR TypeError: Cannot read property 'sort' of undefined

[@StudyMash]

You will have to check value before performing sorting on value to get this resolved, providing below the latest code I updated in subsequent sections github.com/webtrainer-in/HSPA/blob/master/Frontend/src/app/Pipes/sort.pipe.ts

[@eswar338]

@@StudyMash yes,got it .. can u please tell me the solution about password comparison validator issue fixing . and navigation bar toggle not working in responsive mobile view

[@StudyMash]

Toggle button issue I will fix in upcoming videos. Can you give me the github link to repository so that I can look validator problem.

[@vaynard94]

i thought there are no video this week :D Btw any clue when back end tutorial will be start? Im very curious with your api server approach keep it up bro!

[@StudyMash]

Yup, it got little late because of very hectic last week :) . Will start on API part next to next week.

[@vaynard94]

@@StudyMash so the API part is going to be uploaded on 23 Augt? That will be great! Good news! I cannot wait to watch it hehehe

[@StudyMash]

Yup

[@LoganX00]

One small thing. This sorting does not work properly for all number values, as its using a string compare. Below is what I used to turn the string into a number if it's a number, and to a lower case string if its a string. value.sort((a: any, b: any) => { let aField; if (isNaN(a[sortField])){ aField = a[sortField].toLowerCase(); }else{ aField = +a[sortField] } let bField; if (isNaN(b[sortField])){ bField = b[sortField].toLowerCase(); }else{ bField = +b[sortField] } if(aField < bField){ return -1 * multiplier; } else if (aField > bField) { return 1 * multiplier; }else{ console.log("Same"); return 0; } });

[@zaharivaklinov]

Bless you (:

[@vaishalir7323]

hi sir ,i have one interview question if you have time make one video

[@StudyMash]

Hi, what is that question?

[@vaishalir7323]

Coding : Angular/ReactJS Problem statement 1. Build a production ready angular app, which has a dropdown with a list of users sorted in Alphabetical order. ( Use API 1: reqres.in/api/users?page=1) 2. On click of one of the items display the user details in a new page as label and value ( Use API 2: reqres.in/api/users/) 3. Use separate component for dropdown and display of user details API 1 : reqres.in/api/users?page=1 API 2 :reqres.in/api/users/ 4. Write a sample unit Test case & End to end test cases for the same

[@StudyMash]

@@vaishalir7323 this is already there in this tutorial except #4. Unit test.

[@vaishalir7323]

ok sir

[@saibel129]

I think you can use .includes() in search for (const item of value) { let lowerProperty = item[propertyName]?.toLowerCase(); let lowerFilter = filterString?.toLowerCase(); if (lowerProperty?.includes(lowerFilter)) resultArray.push(item); }