Angular Sorting and Filtering Data - Without Any Libraries

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ม.ค. 2025

ความคิดเห็น • 34

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  4 หลายเดือนก่อน

    WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - th-cam.com/video/vcfZ0EQpYTA/w-d-xo.htmlsi=BptT7eqgflHIoQiQ

  • @d.bachmann6798
    @d.bachmann6798 ปีที่แล้ว +2

    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
      @luczztem ปีที่แล้ว

      I agree

  • @oketafred
    @oketafred 2 ปีที่แล้ว +2

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

  • @OscarAndresPabonEstrella
    @OscarAndresPabonEstrella 7 หลายเดือนก่อน

    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
      @MonsterlessonsAcademy  7 หลายเดือนก่อน

      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.

  • @techtiendo
    @techtiendo 8 หลายเดือนก่อน

    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
      @MonsterlessonsAcademy  8 หลายเดือนก่อน

      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.

  • @ShanaAlly-ls9ff
    @ShanaAlly-ls9ff 10 หลายเดือนก่อน

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

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  10 หลายเดือนก่อน

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

    • @ShanaAlly-ls9ff
      @ShanaAlly-ls9ff 10 หลายเดือนก่อน

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

    • @ShanaAlly-ls9ff
      @ShanaAlly-ls9ff 10 หลายเดือนก่อน

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

  • @nadflores128
    @nadflores128 2 ปีที่แล้ว

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

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  2 ปีที่แล้ว +1

      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
      th-cam.com/video/YrLiugDhCuk/w-d-xo.html

  • @kakhachaduneli5296
    @kakhachaduneli5296 ปีที่แล้ว

    Does this method work for angular material table too?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  ปีที่แล้ว

      No I have a separate video on angular material table
      th-cam.com/video/itq4KHN8buM/w-d-xo.htmlsi=c1e8-DHCjLEBJTa4

  • @sandeepneethipudi
    @sandeepneethipudi 2 ปีที่แล้ว

    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
      @MonsterlessonsAcademy  2 ปีที่แล้ว

      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
      @sandeepneethipudi 2 ปีที่แล้ว

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

    • @sandeepneethipudi
      @sandeepneethipudi 2 ปีที่แล้ว

      @@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
      @MonsterlessonsAcademy  2 ปีที่แล้ว +1

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

  • @kolawoleomotosho3073
    @kolawoleomotosho3073 ปีที่แล้ว

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

  • @luiscevallos1
    @luiscevallos1 2 ปีที่แล้ว

    And for API how to make a search ?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  2 ปีที่แล้ว

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

    • @luiscevallos1
      @luiscevallos1 2 ปีที่แล้ว

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

  • @Chinmaywani
    @Chinmaywani ปีที่แล้ว

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

  • @_Greenflag_
    @_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
      @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
      @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
      @MinhHoang-if5gy ปีที่แล้ว +1

      @@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)