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 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.
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, …}
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
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?
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 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); }
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)
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!
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
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); }
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.
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”
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
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; } });
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
Neatly explained.
Thank you very much Sir
Lots of Love from Pakistan
Thank you sir! The way you explain this filtering and sorting is clear like water
Glad to hear that buddy
Thanks a lot for this! Definitely saved me
Nice tutorials, very informative, Thank you Sir
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
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.
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.
After i watche this video i just go for subscribe its owesom 👌.
Great videos thanks a lot Sir 🙂
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, …}
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
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?
thnxxxxx u r the best
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);
}
tnx Mash
Amazing 👌👌
thanks you so much...
Welcome Pragya. 5AM club, I read this book last week only 😀
Sir how to clear filter applied on kendo grid when click on clearfilter button ?
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)
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!
Which extension did you used, to generate the pipes?
here are the extensions i have used in this project : ruclips.net/video/gcxsDhAG_W8/видео.html
Let me know if you still have any question
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
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?
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);
}
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!
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?
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.
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 (:
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
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