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

[@AussieAmigan]

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

[@syedatifhasan7517]

Thanks bro

[@pravinromano8774]

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

[@krzysztofzon8661]

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

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

[@kunalparmar7964]

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

[@akshita5518]

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

[@AussieAmigan]

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.

[@satishraizada5207]

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

[@KadeMackintosh]

this is a huge issue. Would also like to know how to fix this

[@anurbatra4003]

Yes its an issue

[@anthonyyoabmustikasatria8488]

have you fixed this?

[@shubhamgupta9465]

bhut accha video bhai

[@ivanyewo]

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

[@Mohamed-uf5jh]

Great tutorial all in one video Thanks sir!

[@jyotiraghu2657]

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

[@sweetysnehith9692]

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

[@AbhishekSharma-oq2iy]

So wonderful explanation , thanks

[@sudhirclumpcoder2379]

@codo is it called API integration?

[@logospod-cast9574]

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

[@Tenacioustarantula]

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

[@pratimagutal9344]

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

[@tayyabsheikh6666]

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

[@abbasaqhayari2954]

its very helpful , thanks a lot

[@sinahzh1772]

Thank you for this short and good tutorial

[@bazirakeeric7244]

Good ! impirtant videos

[@waseemalsammoue8733]

Thank you very much

[@satishbalaji3640]

That was a great tutorials!!. Thank you

[@mukul13197]

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

[@edvaldoarcanjo8110]

thank you very much, great video

[@logospod-cast9574]

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

[@Sufitech12345]

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

[@palmadecoofficielle4161]

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

[@houdawafi9785]

Great tutorial , thanks

[@alaanaeeim1654]

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

[@yoganandachariparadi3615]

super sir 😍😍

[@mastmovieclip6245]

Why search does not work through out the paginated data?

[@ManishSharma-wz3gs]

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

[@AussieAmigan]

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]

@@AussieAmigan thanks a lot yes working

[@manishasony4998]

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

[@manishasony4998]

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

[@neerajmehra8222]

It's been 8 months Where r u?

[@fbellod86]

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

[@codo124]

Thanks Franco!! & Yes It works.

[@satishraizada5207]

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]

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

[@Александр-ъ3о1щ]

@@satishraizada5207 you fix it?

[@ahsanbaloch9126]

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

[@Saveindia01298]

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

[@hieutancodeproject]

Nice tutorial thanks

[@anurbatra4003]

Well explained

[@aminechakib7019]

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.

[@anilkumarreddy3163]

everything working fine nice.

[@anupampatra8502]

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

[@kiranr2613]

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

[@savage-qw4gk]

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

[@amtech6728]

Thanks for this video🤩

[@mundlapatipraveen9762]

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

[@Sairekha437]

Can u plz provide this code...

[@bharathkasyap]

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

[@joviebendijo7694]

can i ask for the CSS

[@souravdey2721]

Ng2SearchPipeModule & NgxPaginationModule does not work properly when used both

[@atlamasthanaiah7911]

Pagination also getting error. Is there need any instalation

[@codo124]

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

[@sivakarthikeyans3519]

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

[@ranganathprasadkr3239]

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

[@disneychannelstars3583]

My fa fa-icon is not visible ?plz reply

[@AussieAmigan]

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

[@sahnouneya3654]

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

[@codo124]

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.

[@kencoppola2441]

Great video!

[@shubhamshinde4328]

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

[@codo124]

Have you installed ng2-order-pipe ?

[@shubhamshinde4328]

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

[@prashanttripathi1372]

Woo it's great ...

[@pushpasharma3107]

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

[@pallavisangale6830]

How to sort two columns date and name

[@sriparnabhattacharjee500]

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

[@bestincodepoint6677]

Beautiful...

[@sourabhthorat9550]

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

[@issaneto9369]

If possible can you please share the code too.

[@tayyabsheikh6666]

Yeah please ..Me too

[@sumitweb8990]

Great

[@suchitranair7386]

Nice

[@vivekvairagade5681]

You haven't defined orderby pipe anywhere

[@jouiniaziz4100]

merci thanks thank you

[@niravghodadra9217]

how to get that symbol in sorting

[@AussieAmigan]

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]

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

[@ManishSharma-wz3gs]

sorting working fine but icon beside header isn't showing

[@ManishSharma-wz3gs]

found the solution

[@rahulwani1323]

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

[@chourabiseif8817]

install ngx-order-pipe

[@tusharnautiyal8230]

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

[@poonamanap7718]

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

[@bushrayasmin2618]

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

[@codo124]

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

[@ashwanikumar-pk8ge]

How to run This code .. ?

[@ashwanikumar-pk8ge]

I am not able to fetch the data

[@krzysztofzon8661]

​@@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]

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

[@pallavisangale6830]

I got error at reverse

[@ImCaveJohnson]

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]

Ye background music hi itna dala hai ki concentrate nahi hota

[@damirmorankic4710]

Can you upload source code?

[@atlamasthanaiah7911]

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

[@codo124]

Run below command. npm i ng2-order-pipe

[@Tony-uc8wq]

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

[@alokmishra3227]

Hey, Can u provide source code

[@hyderfarooqui1403]

May i know your name?

[@vemularasagna2307]

Search isn't working

[@fernando6347]

me neither

[@karlrussellmenil9460]

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]

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

[@jayakumar2927]

Share code

[@Telusuko_sodara]

Hello

[@erandafernando94]

fucking nice

[@lassel1644]

Dammit that was some horrible background elevator music🙄

[@HoaNguyen-oq7wl]

lừa vl

[@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]

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