Angular Sorting and Filtering Data - Without Any Libraries

[@MonsterlessonsAcademy]

WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - kzbin.info/www/bejne/rJTJi2N7htWMiqMsi=BptT7eqgflHIoQiQ

[@d.bachmann6798]

Have watched several videos with this Author (name?). This is something real high quality. I am an experienced programmer and have even worked with Angular for some time and still this was very much worth watching. He has a God given talent of making coding videos. This series should have 1000s of likes.. really amazing well explained . Very well edited everything is not too long and not too short.. It is a real pleasure to watch and learn from. Also by following these videos you pick up good coding practices with an understanding of why! Really amazing, thnx a lot for these very usefull videos... Keep on the good work!

[@luczztem]

I agree

[@oketafred]

Your contents are amazing, I'm a VueJS Developer but you have motivated me to start using Angular also

[@MonsterlessonsAcademy]

Great to hear!

[@OscarAndresPabonEstrella]

14:14 is it not better for this case to use pure pipes, pure variable or a signal? this because when a method is used this way angular marks the attribute as dirty for the zone.js and will be evaluating practically all the time. I don't know if this behavior has changed with new versions, but before was strongly recommended to don't use functions in the view, unless was an event.

[@MonsterlessonsAcademy]

This video is not about performance optimizations of Angular. Secondly recommendation to not use functions in template never had any valid ground. We can use onPush to optimize renderings. Also if you don't have any performance problems there is no point to optimize something.

[@ShanaAlly-ls9ff]

What is the advantage of implementing this custom table over any other third party libraries like material/datatable/smart table?

[@MonsterlessonsAcademy]

You don't have limitations on configuring and styling as with any third party lib

[@ShanaAlly-ls9ff]

@@MonsterlessonsAcademy can you elaborate on the configuring? And what about performance?

[@ShanaAlly-ls9ff]

@@MonsterlessonsAcademy and also, if many components use tables with different data, is it still advisable to go for a generic custom table implemented internally?

[@sandeepneethipudi]

In my project I have a drop down(select element ) and the options for the combo box is loaded from an api...Everything is working fine if the list has less data but the page gets hanged if the list has huge data (around 10000 ).It is effecting the user experience the user has to wait until the page is loaded.I am using Angular 8 and mdb-select element

[@MonsterlessonsAcademy]

I don't think I understand. Nobody want to see 10000 elements in the list. This is bad UX. Just show only filtered data with 3-5 symbols minimum for search.

[@sandeepneethipudi]

@@MonsterlessonsAcademy it's actually a form which contains the select box. I need to choose one option from those 10000 options

[@sandeepneethipudi]

@@MonsterlessonsAcademy To be more specific,I have a simple form with the following fields 1.Name -Input 2.Category-Select Box 3.Submit button The Category Select box has a data of 10000 options when I select the click on the select box there is delay in opening the drop down. This is effecting the user experience..I request you for suggest me a better solution

[@MonsterlessonsAcademy]

@@sandeepneethipudi As I said it can't be done. If you want it fast then render less data on none data until search.

[@techtiendo]

Amazing content and very useful. Is a valid approach to send a request each time we sort? What I am thinking is to store data on a signal on my service and sort there in order to avoid querying on the backend. From a backender point of view, am I correct or is it more common just delegating it to the backend?

[@MonsterlessonsAcademy]

Yes, absolutely. You can cache pages to avoid requeueing but you can't load 10k data at once from the backend and render. It is not performant.

[@kakhachaduneli5296]

Does this method work for angular material table too?

[@MonsterlessonsAcademy]

No I have a separate video on angular material table kzbin.info/www/bejne/n6XUZX5-g52Vq68si=c1e8-DHCjLEBJTa4

[@nadflores128]

Just wondering how did you configure your vim typescript auto-import. thanks! im a fan of your channel.

[@MonsterlessonsAcademy]

It's coc-vim package with ts language server. In this video I'm talking about my editor and there is a link to config in the description kzbin.info/www/bejne/j6Ovmqidec12q80

[@kolawoleomotosho3073]

Please can you do a video on how to export a table in pdf format. both angular material table and custom table

[@MonsterlessonsAcademy]

Thank you for the idea. I added it to the list.

[@luiscevallos1]

And for API how to make a search ?

[@MonsterlessonsAcademy]

I used this API so here is how to make filter. github.com/typicode/json-server#filter

[@luiscevallos1]

@@MonsterlessonsAcademy thanks for replay I want to make it filter vs API thanks thanks

[@Chinmaywani]

brother you've said custom angular table in title but not implemented input() & output() decorator this is misleading to beginers

[@_Greenflag_]

Hmm 👍👎. You are calling two times your API without any necessity. Imagine if you have 1 000 clients on your website. You will make 2 000 calls, double the server payload ? Just load the data " as is " and implement your sorting functions, in my opinion. edit : Lol and in the end, you link your search functionality with an API call ?! Are you insane :) This is highly inefficient, would not pass an interview, and you will potentially make an DDOS attack with your search functionality, because of server overload . I think your back-end developer will kill you xD

[@MonsterlessonsAcademy]

Imagine if you have 20k records on backend. Every api call will be huge and sorting on client will be slow as it is done on client machine. Nobody does it on production.

[@luczztem]

@@MonsterlessonsAcademy could have a pagination system where the backend would return only like 3 pages of data on page load, and then sort on the client side

[@MinhHoang-if5gy]

@@luczztem Sort on the client side will make the wrong informations if you sort only 3 pages, incase the current client data rows is not exactly information (Imagine the exactly information is located on backend side at the sorting time)