How to create reactive pagination (without subscribing!) | Reactive Programming with RxJS in Angular

[@JoshuaMorony]

Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076

[@ytamb01]

Thanks for responding to questions raised from your earlier videos. It's great to see good approaches to the real world requirements that most of us day-to-day devs face. More of this would be really good.

[@Ag3sd]

I have recently started to switch to reactive angular. This is nice I would like to see more of these kinds of videos. Reactive angular addressing different real application problems.

[@JoshuaMorony]

Feel free to leave any suggestions you have for what you'd like to see covered!

[@nenad6905]

Bro, I have problem with pagination in angular. I want to show about 200.000 obejct from server (laravel) and show in table pagination. But I get data ok, problem is when I click on page 2 or 3 or 4 and so on. - data doesn't show on UI but show in console.log(). How I can solve this?

[@AlainBoudard]

Concise and effective video, that's the perfect technical one that I like. Well done.

[@howdy_suraj]

Just wanted to thank you for such amazing contents. Keep sharing... Love from India

[@shemmuthanga6352]

Hey that's my comment, right there!! 0:44 Thanks and great video as always. A nice follow up video would be appending page 2 data to page 1 data. Like @Gaming X Svssdeva said below in the comments.

[@vivekan97]

Really informative stuff !

[@zjurinec1]

Dear Joshua, what about a situation when you will have to manipulate the displayed list by deleting some of the items? If I understand well, then you will need another behavior subject that holds the current list of items? Please can you explain a bit how would you implement that? Thank you.

[@JoshuaMorony]

I haven't watched this video recently so I'm lacking context, but the general idea is always the same here. If you want to modify the data locally then you will store a copy of that data in the app. Yes, you could have a behaviour subject that holds the currently loaded items and you could next it with the modified values - there are other ways you could do this too though (e.g. there are more reactive/declarative ways using the "scan" RxJS operator). Maybe you would want another BehaviorSubject that holds a list of all the items that have been deleted, then that could be combined with the main stream of data, and you could use that "deletedItems" stream to filter out items from the main stream. Lot's of different ways this could go depending on what exactly you want.

[@abdallahmeddah8461]

What do you think about route based pagination, instead of a behavior subject, you just route to another page and then subscribe to the router to get your paginated data

[@half7752]

when to use observables or normal variables? i should avoid normal variables in max?

[@shmloney]

Please show what is the best way to implement async virtual scrolling with rxjs

[@practicalgnome7372]

It would be interesting to see some marble testing examples on such observables that has various stream combinations. As for streams combining it makes me easier to think of it as a source streams, intermediate and result streams. So the source is an api data or user actions (subjects), result is stream that we subscribe to in template via async pipe and intermediate is whatever streams that helps to make that transition happen.

[@JoshuaMorony]

I like that too, on a technical level I generally like the source/sink framing which I think is terminology taken from electronics - but I definitely think that model suits reactive streams well

[@slavenml9799]

Thanks for the video. Is it possible to make a video for an infinite load? I'm thinking of a way how to push data from the server in an already exists array of stream data

[@waldBestMusics]

Thx for this video, again i learned a lot. I am still puzzled by this, if you had an example it would be cool, let say you have 2 request http, with information, these should be combined and process and the result of these 2, should be two new list of objects that are asynchronously created and that should be passed to child component, the problem will be the input of this child component should handle the data synchronously, data1 should be processed and then data2 should be processed, is there any solution for this? thx again

[@muzammiliqbal1753]

I used this way but problem with this is when we need to filter our data based on multiple values i.e we want to filter the data observable on page change + on input change + on dropdown change etc. In this way we will have to either combine all the observables or use class variables and refresh that manually.

[@svssdeva]

CAN YOU DO THIS INFINITE LOADER ? LIKE WE HAVE IN IONIC LIKE CONCATENATING 1 ARRAY OF DATA WITH NEW. PAGE 1 DATA COMBINES WITH PAGE 2 AND THEN SO ON...

[@JoshuaMorony]

Yes for sure - I might do up a little example for this as well

[@balajeebala7810]

Joshua more videos on ngrx and reactive programming

[@zaharouni1]

How to deal with file uploading reactively and cancellable in the same time and has progress percentage ?

[@gnoyl]

Hi! Lets say we have an update and delete http methods. How would the pipe look so that whenever we update/delete we trigger the getData? basically we have page$, pageSize$, trigger$. Ive tried combineLatest with the 3 - doesnt work since the trigger$ doesnt emit initially. I tried with repeatWhen(() => trigger$) but it doesnt work. I've been trying to implement that for the last 5 hours and im going mad.

[@kamertonaudiophileplayer847]

Unless you have an infinity stream, you need also check if the stream is exhausted before doing +1.

[@khumozin]

How do you create your thumbnails?

[@JoshuaMorony]

I have a template with layers set up in Affinity Photo with different things like the corners/logos/backgrounds for different frameworks. Then for each thumbnail I just swap in some different text, pick a random bg, change things up a bit, and it's done - saves a lot of time!

[@khumozin]

@@JoshuaMorony I love them! ❤ And your videos too! 🔥

[@OLIV3R_YT]

Nice

[@hansschenker]

Reactive Animations in Angular would be a canditate: an animation is a state change of a dom property!

[@ThomasBurleson]

Recommendations: 1) rename `currentPageData$` ==> `passengers$` 2) Bad idea to show/use `this.currentPage$.value`. This promotes bad practices when trying to good state management. Stream values should be consider inaccessible except in operators and subscribes.

[@JoshuaMorony]

Hey Thomas - curious what changes you would make for point 2 here (keeping in mind that the goal in this example is to be reactive, so we don't want to subscribe manually)