Add Filtering and Sorting using angular pipes
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Angular pipes are useful in case when you want to transform any data in angular template without changing the underlying data format. We will understand pipes and create custom pipes to sort and filter properties on list page in this video.
Understand the difference between unknown and any type
mariusschulz.c...
GitHub link
github.com/web...
Code Zip File
github.com/web... .
You can support me by donating on
www.buymeacoff...
Thanks
Studymash
![POLYCAT - ข้อความรูปยิ้ม :) [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
Thank you sir! The way you explain this filtering and sorting is clear like water
Glad to hear that buddy
Neatly explained.
Thank you very much Sir
Lots of Love from Pakistan
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
Great, thanks for sharing this
@@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.
Nice tutorials, very informative, Thank you Sir
Thanks a lot for this! Definitely saved me
OMG I hope my teacher can teach like this..Thank you so much sir.. my teacher: 1 year vs Study Mach: 30 minutes ;p
Great
Great videos thanks a lot Sir 🙂
superb,great video
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
After i watche this video i just go for subscribe its owesom 👌.
thnxxxxx u r the best
Loving this channel and the videos! Thanks a lot sir!
Glad to hear that you are loving it, thanks for taking time out for appreciation.
Amazing 👌👌
tnx Mash
thanks you so much...
Welcome Pragya. 5AM club, I read this book last week only 😀
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, …}
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);
}
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!
Yup, it got little late because of very hectic last week :) . Will start on API part next to next week.
@@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
Yup
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
Hey Rodrogo, I have the same question as you...did you guys manage to find a solution for it? thanks
@@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);
}
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?
Sir how to clear filter applied on kendo grid when click on clearfilter button ?
Which extension did you used, to generate the pipes?
here are the extensions i have used in this project : th-cam.com/video/gcxsDhAG_W8/w-d-xo.html
Let me know if you still have any question
Were you going to add a link for unknown vs any?
Not sure how the link was deleted from video description, I have added the same back.
@@StudyMash Many thanks, Sandeep!
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)
Can u send me the code to clear filter of kendo grid when clicking on clear filter button
Sorry, I have no idea about it
I am not able to sort the data which I have taken from json. Can you please help
Definitely, can you share the github link of your code so that I can look where the issue is?
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
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
how have you fixed it? facing the same error
I too am getting the same error, how did you solve it?
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.
You means, you are not getting any results on load and when you type the desired city, it is appearing in results?
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”
If you can send me code on sandeep@studymash.com, I can look it where the issue is
Study Mash sure thanks!
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;
}
});
Bless you (:
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
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
@@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
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.
hi sir ,i have one interview question if you have time make one video
Hi, what is that question?
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
@@vaishalir7323 this is already there in this tutorial except #4. Unit test.
ok sir