This video got me on the right track to write my own infinite-scroll w/ the CDK Virtual Scroller. It took 5 minutes and was practically as easy as implementing Ionic's ion-infinite-scroll (which does not work with the CDK scroller at 100vh). Great video! Thank you
This came at the best of times. I am working on a project where I need to create an infinite scroll and batch it by an arbitrary number the user may chose. Thank you based angular!
You've given me a great reason to not delay updating my VacationCounts project to Angular 7 as I was dreading introducing paging views. This is much better and more fun. However the best thing I learned from watching your video is that the Firestore database console UI allows filtering a collection by field. I never noticed the filter button above the list of document IDs. I really needed that! I wonder how long it has been there :) Thanks for happening to show that in your excellent video tutorial.
Another thought, have you tried using this with flexlayout? I wonder what kind of manipulation you would have to do to the index with a 4 item wide flexlayout.
Well explained! But, the infinite scroll uses the spread operator to add more elements. And, this reinitializes the virtual scroll entirely and can cause serious performance hit when the data is huge. The whole point of using virtual scroll is to reduce performance hit from extensive RAM usage. Now we have a different issue. Extensive CPU usage. Correct me If I am wrong.
Been looking forward to this. Hopefully it's better than the AngularJS Material version. - Support for elements with dynamic height. - Correct height of the scroll container without setting it as a px value for responsive design.
What would be the best approach to set the height of the cdk-virtual-scroll-viewport dynamically? I have managed to achieve this through directive, it works but sometimes virtual-scroll-viewport behaves unpredictably - decreases in height... the height of the scroll bar stays the same height but the number of rendered elements is lower than what it should be
I have a question, I fully understand all the code except a part, how do you get the first values from the database? Because I understand that you use the startAfter() combination and send it the last name you currently have through the people [people.length - 1] .name), and so on .... But what I do not understand as it begins, how do you obtain the first values ?...
Another great tutorial! How about a video on horizontal scroll? I have a database of people who have been booked into jail, i'd like their previous bookings listed via horizontal scroll.
Thank you for the tutorial! One question: If I add " , 'desc' " to the orderBy, I get the following error: ERROR TypeError: Cannot read property 'name' of undefined Any ideas?
I know it's this was asked a year ago, but someone might face this issue and find this helpful. So the cause is that these orders requires an index to be built at firebase. You should see an error message or warning in the console that the query requires an index. Just click on that link and build the index, after that you should be all set.
As I am updating the list with Infinite scroll ,my Dom is also getting updated with new items. How can I Restrict my Dom to certain like 10 items ? I have tried to do so while keeping and upward and downward threshold of 10 items. So I fetch 30 items(asynchronously on scroll) and show 10 items at once but when the user scrolls very fast to the top ,my upper items are not seen .
I have a bit confuse about using virtual scrolling vs ngx-infinite-scroll. What is the better approach for pagination?. Can anyone let me know when for what?
Awesome content! Would the example you have shown work the same way if the list was reversed. Say you have a list of chat messages and you want the user to scroll up to see the previous messages, and they are ordered descending. Would it be as simple as reversing the orderBy?
This doesn't sound like it'd work for something like displaying messages if the items need a fixed height as a message could be really long and thus this not working.
Great! Thank you! I have a question, how can we preserve the state of checkboxes in virtual scroll? On scroll down the list, it resets the state of the previously checked checkboxes.
Previously got scared of angular bcz every 6 months version bump But now by seeing the features, performance and easy of upgrading to new version Now I am kind of bro when is the new version come 😎
6 лет назад
Great :) any nice way to be able to do paginate and do filtering/queries with multiple possible fields while keeping the code clean?
difficult to understand.
This video got me on the right track to write my own infinite-scroll w/ the CDK Virtual Scroller. It took 5 minutes and was practically as easy as implementing Ionic's ion-infinite-scroll (which does not work with the CDK scroller at 100vh). Great video! Thank you
This came at the best of times. I am working on a project where I need to create an infinite scroll and batch it by an arbitrary number the user may chose. Thank you based angular!
your voice is so comforting :)
but difficult to understand...
🎉 it was so much needed.
Currently dealing with a similar problem.
Just looked over Angular 7, very excited and this tutorial is great!
Was going to figure this out today, but this will save lots of time! Very clear tutorial! Thanks!
Sweet, yeah they've done a great job with this API imo.
I just wanna say I love your videos.
Big fan of your angular courses... Helped me alot with my coding... Wish i could afford your premium features
Just had similar problem with long list for . Solved it differently but might try to implement this one later. Love your videos
I really like your videos, shorts and great.
Best Angular content on here
You've given me a great reason to not delay updating my VacationCounts project to Angular 7 as I was dreading introducing paging views. This is much better and more fun.
However the best thing I learned from watching your video is that the Firestore database console UI allows filtering a collection by field. I never noticed the filter button above the list of document IDs. I really needed that! I wonder how long it has been there :) Thanks for happening to show that in your excellent video tutorial.
Awesome! It's been there for a couple months now, but it's easy to miss. I found out about it on Twitter, otherwise I would have missed it also.
AWESOME!!! I've been waiting for this feature.
Another thought, have you tried using this with flexlayout? I wonder what kind of manipulation you would have to do to the index with a 4 item wide flexlayout.
Can't wait to try this myself Jeff, great work as always !
So happy they have released this!
This is perfect for what I'm currently doing for my job!
good video, keep making new videos labout cdk, schematics and other interesting APIs that haven't been widely known
I'm as happy now while watching your videos as the first time ever!
Fabulous! Now, all we need is for Ionic to keep up with Angular releases.
I love the way you teach. Thank you very much 🙂
This is a great new feature. Thanks for the video!
Angular 7 is really so awesome!!
With Firestore this became so powerful!
I was just about to ask for this video
Great video.. thanks for showing this amazing new feature in Angular 7!
Great video! Thanks for putting this together.
Can't wait to use this
You are awesome.. I know that you know that.. so this comment is just for that gift.. :)
Another fantastic tutorial. Thank you!
Exellent, thx, the thing I have been looking for.
Thank you for making the video.
Another great video! Hope we can see some more Ionic v4 videos as the framework moves out of beta. Thank so much!
Well explained! But, the infinite scroll uses the spread operator to add more elements. And, this reinitializes the virtual scroll entirely and can cause serious performance hit when the data is huge. The whole point of using virtual scroll is to reduce performance hit from extensive RAM usage. Now we have a different issue. Extensive CPU usage. Correct me If I am wrong.
I understood almost none of that, but I still watched the whole video :P
That is great!! Thanks for always sharing new stuff :)
Been looking forward to this. Hopefully it's better than the AngularJS Material version.
- Support for elements with dynamic height.
- Correct height of the scroll container without setting it as a px value for responsive design.
Winter is coming and I need that hat! :D On a side note, your videos are great. Short yet very informative. Keep up good work!
Perfect as always Jeff...
Thanks for sharing an amazing feature info
Really cool feature. Would have been great in a project i did few months back.
Nice tutorial. Please make a video on drag and drop too..
This is a very useful video ! Nice work :D
thank you! your videos are awesome
As awesome as ever 👌👌👌
Nice introduction!
Awesome video again! Thx for sharing 🦑
great video as always ! thank you
Love the tutorial. Thank you
Awesome 😍 anulgar is the best
could you please advise how to make sure items are added and/or removed from the list upon database changes as you suggest in the video?
Nice, exactly what I need
What would be the best approach to set the height of the cdk-virtual-scroll-viewport dynamically? I have managed to achieve this through directive, it works but sometimes virtual-scroll-viewport behaves unpredictably - decreases in height... the height of the scroll bar stays the same height but the number of rendered elements is lower than what it should be
Great One... You Are Awesome...
as always: great tutorial! thanks
Really like your video, Goooodd Jobbb!
Great content as per usual! Out of interest, why did you choose to write your getBatch tap method that way, rather than this.theEnd = !arr.length?
Good work, helpful. Thank you.
top quality as always
It's good info, Any thoughts on how to do same for Images which store on some cloud ? Can you give some suggestions ?
Cool Videos thanks for the material
nice stuff, keep it up man !
Good ,Finally have this feature
I have a question, I fully understand all the code except a part, how do you get the first values from the database?
Because I understand that you use the startAfter() combination and send it the last name you currently have through the people [people.length - 1] .name), and so on ....
But what I do not understand as it begins, how do you obtain the first values ?...
Thanks!!! this really help me!
Nice the video very explanatory
Excellent, just released this weekend and immediately you share your knowledge on it. Thanks Jeff!!!!! I thought v7 would include Ivy :(
Another great tutorial! How about a video on horizontal scroll? I have a database of people who have been booked into jail, i'd like their previous bookings listed via horizontal scroll.
Cool app, I believe the CDK supports horizontal scroll out of the box, so you could probably make that happen with just a few minor changes.
This was a much need feature, but what about variable height components? we will need some components to resize in some form?
Thank you for the tutorial! One question: If I add " , 'desc' " to the orderBy, I get the following error:
ERROR TypeError: Cannot read property 'name' of undefined
Any ideas?
I know it's this was asked a year ago, but someone might face this issue and find this helpful. So the cause is that these orders requires an index to be built at firebase. You should see an error message or warning in the console that the query requires an index. Just click on that link and build the index, after that you should be all set.
As I am updating the list with Infinite scroll ,my Dom is also getting updated with new items.
How can I Restrict my Dom to certain like 10 items ?
I have tried to do so while keeping and upward and downward threshold of 10 items.
So I fetch 30 items(asynchronously on scroll) and show 10 items at once but when the user scrolls very fast to the top ,my upper items are not seen .
I have a bit confuse about using virtual scrolling vs ngx-infinite-scroll. What is the better approach for pagination?. Can anyone let me know when for what?
Thanks for the video!
Awesome content! Would the example you have shown work the same way if the list was reversed. Say you have a list of chat messages and you want the user to scroll up to see the previous messages, and they are ordered descending. Would it be as simple as reversing the orderBy?
will you do a quick guide to update app with the cli?
Amazing video! Can this work with the new Drag and Drop too?
Amazing video as always! This is really useful.
Also: There are some glitches at 5:15, just letting you know. Maybe just some rendering issues.
Seems like a style choice
Great job 👌
Looks good. Thanks!
nice video once again!
Great tutorial
Where are those intro animations from? I mean Angular and Firebase icon effects. Looks great. Is that some kind of css animation or hand-drawn?
This doesn't sound like it'd work for something like displaying messages if the items need a fixed height as a message could be really long and thus this not working.
can we apply for random height list ... can we make synchronus using node and mongo?
Is it possible to apply virtual scrolling to mat table having sort, filter and row selection capability
There's one issue with current one is that it only accepts fixed size cells. If you require random size cells angularUI-scroll does a better job.
I have not actually tried to work with dynamic sizes yet, but I think there is an autosize scrolling strategy in the CDK.
There is but in development available only through the experimental package AFAIK
Awesome video. Btw can I get the cap?
Great! Thank you! I have a question, how can we preserve the state of checkboxes in virtual scroll? On scroll down the list, it resets the state of the previously checked checkboxes.
One option is to manage their state within a reactive form.
@@Fireship thanks 😊
Wonderful video
Previously got scared of angular bcz every 6 months version bump
But now by seeing the features, performance and easy of upgrading to new version
Now I am kind of bro when is the new version come 😎
Great :)
any nice way to be able to do paginate and do filtering/queries with multiple possible fields while keeping the code clean?
Great video! Subscribed!
Could You do a video on new drag and drop feature in Angular 7?
Thaanks dude !
This solve the rendering issue , next challenge is how to export full list to a csv or excel ?
That may have seemed relatively complex, but in the grand scheme of things, it's very simple considering what it does ...
Well said :)
Keep sharing, jeff
Another Great video :)
You are very good very cool but you r bit faster can you please make a document for this tutorial ? please.
Yes, there is a link to the full writeup in the video description.
Cool feature!
Great conten Jeff thank you