Angular Sorting and Filtering Data - Without Any Libraries

Поделиться
HTML-код
  • Опубликовано: 18 янв 2025

Комментарии • 34

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  4 месяца назад

    WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - ruclips.net/video/vcfZ0EQpYTA/видео.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!

  • @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.

  • @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
      ruclips.net/video/YrLiugDhCuk/видео.html

  • @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?

  • @kakhachaduneli5296
    @kakhachaduneli5296 Год назад

    Does this method work for angular material table too?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      No I have a separate video on angular material table
      ruclips.net/video/itq4KHN8buM/видео.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)