Angular 8 Searching , Sorting & Pagination | Fetch & Display Json Data into a Table

Поділитися
Вставка
  • Опубліковано 15 гру 2024

КОМЕНТАРІ • 131

  • @krzysztofzon8661
    @krzysztofzon8661 4 роки тому +5

    Run this to install all dependencies:
    npm install ng2-order-pipe ng2-search-filter ngx-pagination --save

  • @AussieAmigan
    @AussieAmigan 4 роки тому +12

    Tip: Put the pagination-controls outside of the table or you'll blow out the size of the first column.

  • @akshita5518
    @akshita5518 3 роки тому +2

    when i use orderBy pipe it is throwing error pipe is not found
    can any one tell this

  • @pravinromano8774
    @pravinromano8774 3 роки тому +3

    nice video sir, thank you for the knowledge , next time please explain once in the video it will be of a great help for the freshers

  • @sudhirclumpcoder2379
    @sudhirclumpcoder2379 2 роки тому

    @codo is it called API integration?

  • @sweetysnehith9692
    @sweetysnehith9692 10 місяців тому

    Hi
    How to set show record count option and how to change the record count like 10,20,50,100...

  • @logospod-cast9574
    @logospod-cast9574 2 роки тому

    The console show me after install the libraries
    11 vulnerabilities (5 moderate, 5 high, 1 critical)
    How can I fix them? Thanks

  • @kunalparmar7964
    @kunalparmar7964 2 роки тому

    Very helpful
    And
    In a so easy way
    Thank you so much

  • @brucevwilcox1002
    @brucevwilcox1002 Рік тому

    Some nice content, important information. In future, consider the pace of the content. For some parts have snippets prepared to avoid having to watch you type out simple content. Then slow down for more complex items. Link to a repo with code too. Thanks.

  • @Tenacioustarantula
    @Tenacioustarantula 3 роки тому

    I get the error
    TypeError: undefined is not a function (near '...this.users.filter...') ,sounds like its throwing of on the res function ?

  • @satishraizada5207
    @satishraizada5207 4 роки тому +6

    Great video to explain the bunch of thing but the search does not work with pagination specially when you are on second page and search a keyword, If it works for you could you please upload a repo for references. GREAT WORK ANYWAY

  • @shubhamgupta9465
    @shubhamgupta9465 Рік тому

    bhut accha video bhai

  • @palmadecoofficielle4161
    @palmadecoofficielle4161 2 роки тому

    merci beaucoup pour ce tuto sinon moi jai une erreur error TS2339: Property
    'filter' does not exist on type 'Observable

  • @jyotiraghu2657
    @jyotiraghu2657 3 роки тому +3

    This is good video sir can you help me for searching rage between 4 to 10 or 15 to 20 any rage data using id

  • @logospod-cast9574
    @logospod-cast9574 2 роки тому

    When I write something to search the first time, works very well, but: When I erase a letter, but put the erased letter again, then don`t search anything.
    How can I fix the "delete letters" issue?
    Thanks

  • @bazirakeeric7244
    @bazirakeeric7244 3 роки тому

    Good ! impirtant videos

  • @pratimagutal9344
    @pratimagutal9344 2 роки тому

    Can you please extend video for particular search from like only 5 row between letter M to R like that ..and also delete any particular column ..n how to do ascending descending order

  • @ivanyewo
    @ivanyewo 2 роки тому

    Thank's. It's very usefull !!!

  • @mastmovieclip6245
    @mastmovieclip6245 2 роки тому

    Why search does not work through out the paginated data?

  • @Sufitech12345
    @Sufitech12345 3 роки тому

    when i am searching for value which is in paginator 2 i should get value in paginator 1 only i don't want to change paginator for that value which i am searching in paginator 1
    can you help on this

  • @Sairekha437
    @Sairekha437 Рік тому +1

    Can u plz provide this code...

  • @tayyabsheikh6666
    @tayyabsheikh6666 Рік тому +1

    Awesome Great....Can you please provide Source code ?????

  • @AussieAmigan
    @AussieAmigan 4 роки тому

    This was a great tutorial for this functionality and helped me a lot. I just wish he'd stopped for a little bit before transitioning to other pages.

  • @AbhishekSharma-oq2iy
    @AbhishekSharma-oq2iy 2 роки тому

    So wonderful explanation , thanks

  • @Saveindia01298
    @Saveindia01298 Рік тому

    Dint understand why component.ts and user.ts both created
    We could add both in one file ? Like component. Ts

  • @joviebendijo7694
    @joviebendijo7694 Рік тому

    can i ask for the CSS

  • @mundlapatipraveen9762
    @mundlapatipraveen9762 3 роки тому

    On url based data display.. not file.. how to create it.. please explain new for angular.. please... like "Jsonplaceholder"

  • @hieutancodeproject
    @hieutancodeproject 2 роки тому

    Nice tutorial thanks

  • @abbasaqhayari2954
    @abbasaqhayari2954 2 роки тому

    its very helpful , thanks a lot

  • @aminechakib7019
    @aminechakib7019 4 роки тому

    Thank you very much for this tutorial, but in the search part I am having this error (this.users.filter is not a function), can you help me, please.

  • @neerajmehra8222
    @neerajmehra8222 3 роки тому

    It's been 8 months
    Where r u?

  • @atlamasthanaiah7911
    @atlamasthanaiah7911 4 роки тому +1

    Pagination also getting error. Is there need any instalation

    • @codo124
      @codo124  4 роки тому

      You need to install ngx-pagination package.
      Please run below command
      npm i ngx-pagination

  • @souravdey2721
    @souravdey2721 2 роки тому

    Ng2SearchPipeModule & NgxPaginationModule does not work properly when used both

  • @savage-qw4gk
    @savage-qw4gk 4 роки тому

    i tried only search it's not working followed all steps but still nothing shows I installed and imported packages still

  • @bharathkasyap
    @bharathkasyap 2 роки тому

    Import{users} from ../_model/users I'm getting an error while imports what to do

  • @edvaldoarcanjo8110
    @edvaldoarcanjo8110 2 роки тому

    thank you very much, great video

  • @sinahzh1772
    @sinahzh1772 3 роки тому

    Thank you for this short and good tutorial

  • @Mohamed-uf5jh
    @Mohamed-uf5jh 3 роки тому

    Great tutorial all in one video Thanks sir!

  • @fbellod86
    @fbellod86 4 роки тому +2

    Nice tutorial, what if you searching a field, the pagination still works?

    • @codo124
      @codo124  4 роки тому +1

      Thanks Franco!! & Yes It works.

    • @satishraizada5207
      @satishraizada5207 4 роки тому +3

      It works on page one if you switch to page 2 or 3 and then search it does not work, i think that fix can make it complete package video

    • @josebarrera6695
      @josebarrera6695 4 роки тому

      @@satishraizada5207
      Could you get the search to be on all pages? Sorry for my english haha

    • @Александр-ъ3о1щ
      @Александр-ъ3о1щ 3 роки тому

      @@satishraizada5207 you fix it?

    • @ahsanbaloch9126
      @ahsanbaloch9126 3 роки тому

      @@Александр-ъ3о1щ did you find the solution for searching on other pages?

  • @sivakarthikeyans3519
    @sivakarthikeyans3519 3 роки тому

    no pipe found with orderBy error..
    you didnt show the orderby pipe code

  • @mukul13197
    @mukul13197 3 роки тому +1

    great video
    one Problem
    I have 1 array for example
    A:{
    name: "Alpha"
    ItemOfB:[ 1 ]
    }
    and second array
    B{
    name: "Beta"
    item1: { name : item1, id : 0}
    Item2: { name : item2, id : 1}
    Item3: { name : item3, id : 2}
    }
    //
    Import class Bmodel ;
    Export class AModel {
    name:string;
    ItemOfB: Bmodel[]
    }
    //
    Export class Bmodel{
    item1: { name : string, id : number}
    Item2: { name : string, id : number}
    Item3: { name : string, id : number}
    }
    I want to access element of array B and display it where im getting response of array A . But im only getting [1] from itemofB , but not the actual index of array B and its value ( which is Item2: { name : item2, id : 1}) . how do i extract json value from another array hosted on different servers - suppose A is hosted on 3000 and B at 3001 and im linking them from their Models only

  • @waseemalsammoue8733
    @waseemalsammoue8733 Рік тому

    Thank you very much

  • @satishbalaji3640
    @satishbalaji3640 3 роки тому

    That was a great tutorials!!. Thank you

  • @kiranr2613
    @kiranr2613 3 роки тому +1

    Great video can you please share source code of this!! Any git or Google drive link to download the same!!

  • @disneychannelstars3583
    @disneychannelstars3583 4 роки тому

    My fa fa-icon is not visible ?plz reply

    • @AussieAmigan
      @AussieAmigan 3 роки тому

      npm install font-awesome --save
      Then in angular.json you need to add "./node_modules/font-awesome/css/font-awesome.css" under styles.

  • @ManishSharma-wz3gs
    @ManishSharma-wz3gs 3 роки тому

    thanks the Video and
    can we add pipe to search for more than one column instead, currently it only searching one column only

    • @AussieAmigan
      @AussieAmigan 3 роки тому +2

      I searched two fields from a single input without a pipe. In Search() in the filter arrow function just add another || (OR) condition.
      return res.yourfield1.toLocaleLowerCase().match(this.searchText.toLocaleLowerCase())
      || (res.manager != null && res.yourfield2.toLocaleLowerCase().match(this.searchText.toLocaleLowerCase()))
      I also check for null just in case because my project's json source had nulls. I changed some variable names from the video, but you'll work it out.
      If you use a pipe I think you could stuff up the ordering, but if anyone has it working that way, please reply.

    • @ManishSharma-wz3gs
      @ManishSharma-wz3gs 3 роки тому

      @@AussieAmigan thanks a lot yes working

    • @manishasony4998
      @manishasony4998 3 роки тому

      @@ManishSharma-wz3gs can you please share the exact code in which you have tried and got output.

    • @manishasony4998
      @manishasony4998 3 роки тому

      I tried the same way as leo mentioned but am not got the output..pls help me on this

  • @houdawafi9785
    @houdawafi9785 2 роки тому

    Great tutorial , thanks

  • @anurbatra4003
    @anurbatra4003 2 роки тому

    Well explained

  • @alaanaeeim1654
    @alaanaeeim1654 3 роки тому

    please when make any example explain the modules u used before test such install ngx-order-pipe an ..... thanks god job dear

  • @yoganandachariparadi3615
    @yoganandachariparadi3615 Рік тому

    super sir 😍😍

  • @pallavisangale6830
    @pallavisangale6830 3 роки тому

    How to sort two columns date and name

  • @ranganathprasadkr3239
    @ranganathprasadkr3239 2 роки тому

    Type event is not assignable to type number ,error is cmg like this can anyone help me whn am using pagination

  • @sriparnabhattacharjee500
    @sriparnabhattacharjee500 3 роки тому

    The Search doesn't work when you navigate to page 2

  • @anilkumarreddy3163
    @anilkumarreddy3163 3 роки тому

    everything working fine nice.

  • @shubhamshinde4328
    @shubhamshinde4328 4 роки тому

    Thank you for Video. In sorting values are not getting properly sort

    • @codo124
      @codo124  4 роки тому +1

      Have you installed ng2-order-pipe ?

    • @shubhamshinde4328
      @shubhamshinde4328 4 роки тому

      @@codo124 Yes got my issue solved the numbers were in strings. Converted them to integers then sorting worked properly too.

  • @anupampatra8502
    @anupampatra8502 3 роки тому

    Very nice explanation with live demo. If possible can you please share the code too.

  • @sahnouneya3654
    @sahnouneya3654 4 роки тому

    hi, thanku for tutorial but i'm having an erreur can you help me plz .

    • @codo124
      @codo124  4 роки тому

      Hii can please you elaborate the error so that i can get better idea.
      For now please check your user.ts once. It seems you haven't pass required parameters in constructor.

  • @sourabhthorat9550
    @sourabhthorat9550 3 роки тому

    How to display a message "Result is not found" if result is not there

  • @issaneto9369
    @issaneto9369 2 роки тому +1

    If possible can you please share the code too.

  • @amtech6728
    @amtech6728 3 роки тому

    Thanks for this video🤩

  • @vivekvairagade5681
    @vivekvairagade5681 3 роки тому

    You haven't defined orderby pipe anywhere

  • @ManishSharma-wz3gs
    @ManishSharma-wz3gs 3 роки тому

    sorting working fine but icon beside header isn't showing

  • @niravghodadra9217
    @niravghodadra9217 4 роки тому

    how to get that symbol in sorting

    • @AussieAmigan
      @AussieAmigan 4 роки тому

      npm install font-awesome (ignore all the ridiculous warnings that follow)
      Add ""./node_modules/font-awesome/css/font-awesome.css"" to styles under angular.json. (change css if you are using different style sheet system)
      Don't do any of the module imports that some of the other tutorials go into, as they aren't necessary for this functionality.

    • @krzysztofzon8661
      @krzysztofzon8661 4 роки тому

      You can use font-awesome or use a copy-paste symbol --> ᛨ ↕ ⮁

  • @bushrayasmin2618
    @bushrayasmin2618 4 роки тому

    Thanku for tutorial, but I'm having issue with searching, it is showing error with ngModel

    • @codo124
      @codo124  4 роки тому +1

      In order to use ngModel you need to import the FormsModule package in your app.module.ts.

  • @rahulwani1323
    @rahulwani1323 3 роки тому

    error showing " No pipe found with name 'orderBy'. "

    • @chourabiseif8817
      @chourabiseif8817 3 роки тому

      install ngx-order-pipe

    • @tusharnautiyal8230
      @tusharnautiyal8230 3 роки тому

      @@chourabiseif8817 after installing ngx-order-pipe its still the same error No pipe found with name 'orderBy'

    • @poonamanap7718
      @poonamanap7718 2 роки тому

      Hey did u get solution????i have same issue

  • @pushpasharma3107
    @pushpasharma3107 2 роки тому

    Hi Bro, Can you please provide me CSS for this table ? Btw thanx alot your video is very helpful for me.

  • @ashwanikumar-pk8ge
    @ashwanikumar-pk8ge 4 роки тому

    How to run This code .. ?

    • @ashwanikumar-pk8ge
      @ashwanikumar-pk8ge 4 роки тому

      I am not able to fetch the data

    • @krzysztofzon8661
      @krzysztofzon8661 4 роки тому

      ​@@ashwanikumar-pk8ge In order to get data from a .json file, you need to host it, or you can practice on dummy data from jsonplaceholder.typicode .com for example.

    • @Sairekha437
      @Sairekha437 Рік тому

      @@ashwanikumar-pk8ge mee too..wt to do?

  • @kencoppola2441
    @kencoppola2441 3 роки тому

    Great video!

  • @alokmishra3227
    @alokmishra3227 3 роки тому

    Hey,
    Can u provide source code

  • @bestincodepoint6677
    @bestincodepoint6677 3 роки тому

    Beautiful...

  • @prashanttripathi1372
    @prashanttripathi1372 3 роки тому

    Woo it's great ...

  • @pallavisangale6830
    @pallavisangale6830 3 роки тому

    I got error at reverse

  • @damirmorankic4710
    @damirmorankic4710 2 роки тому

    Can you upload source code?

  • @suchitranair7386
    @suchitranair7386 3 роки тому

    Nice

  • @sumitweb8990
    @sumitweb8990 3 роки тому

    Great

  • @hyderfarooqui1403
    @hyderfarooqui1403 4 роки тому

    May i know your name?

  • @jouiniaziz4100
    @jouiniaziz4100 3 роки тому

    merci thanks thank you

  • @atlamasthanaiah7911
    @atlamasthanaiah7911 4 роки тому

    Where to get orderBy . Pipe not getting anywhere.
    I am getting order by.

    • @codo124
      @codo124  4 роки тому

      Run below command.
      npm i ng2-order-pipe

    • @Tony-uc8wq
      @Tony-uc8wq 3 роки тому

      @@jeromepaulson8483 I tried installing with ngx-order-pipe, and im still having trouble. Can I see how you solved this issue?

  • @vemularasagna2307
    @vemularasagna2307 3 роки тому

    Search isn't working

  • @jayakumar2927
    @jayakumar2927 3 роки тому

    Share code

  • @ImCaveJohnson
    @ImCaveJohnson 2 роки тому

    You'd think in a tutorial with searching you'd spend more than 2 seconds on screen in the pipe you actually do it.

  • @poonamanap7718
    @poonamanap7718 2 роки тому

    Ye background music hi itna dala hai ki concentrate nahi hota

  • @karlrussellmenil9460
    @karlrussellmenil9460 3 роки тому

    Topic: Full stack javascript - Data Pagination and Filtering
    Good day,
    If I may humbly ask a little help, any hints, comments and suggestions are very much welcome, thank you in advance for all your help, please see question below, how do I code this?:
    /*
    Create the `showPage` function
    This function will create and insert/append the elements needed to display a "page" of nine students
    */
    /*
    Create the `addPagination` function
    This function will create and insert/append the elements needed for the pagination buttons
    */
    // Call functions

  • @doston8795
    @doston8795 4 роки тому

    Hey buddy good job!
    may i see ur github ? if you don't mind

  • @Telusuko_sodara
    @Telusuko_sodara 2 роки тому

    Hello

  • @erandafernando94
    @erandafernando94 3 роки тому

    fucking nice

  • @lassel1644
    @lassel1644 3 роки тому

    Dammit that was some horrible background elevator music🙄

  • @HoaNguyen-oq7wl
    @HoaNguyen-oq7wl 3 роки тому

    lừa vl

  • @waseemalsammoue8733
    @waseemalsammoue8733 Рік тому

    // npm i json-server
    // run json
    // json-server --watch db.json
    // json-server db.json
    // create json file
    // npx json-server --watch db.json

  • @vaishnvibanginwar1609
    @vaishnvibanginwar1609 3 роки тому +1

    Very nice explanation with live demo. If possible can you please share the code too.