It has taken you precious time to develop your carefully crafted list of items with variable height with Angular. Now, your only remaining task is ...
For further actions, you may consider blocking this person and/or reporting abuse
Hello !
What a piece of work !
I implemented it, and it took me quite some time to figure out the what and why :)
Actually, the last piece I missed was the CSS part where we need to have a declared
displayproperty for the host of the items, in order for the custom element to be actually calculated by the clientHeight.Anyway, thanks a million for the hard work.
Thank you! I am glad that the article helped you.
Indeed, this is something that I haven't explicitly mentioned since I intentionally omitted the details about the UI implementation in the article itself. I might add a separate comment in the repository that the container should be a block (Angular components use
display: inlineby default).Thanks for your answer.
Actually, could you tell me if the "predicted" item height calculation is important or maybe we could get rid of it in a rather simple situation ? I will experiment some variations on my actual project anyway.
Unfortunately, I cannot give you a clear-cut "yes" or "no". It really depends on your use case. At the very least, you will need to provide a ballpark figure that represents the average size of your list item so that the total scroll area can be calculated. This, however, might be problematic, if your items have the potential to vary greatly in size and these size differences are not evenly distributed across the list (averaging will be harder). But, by all means, you can experiment and fine tune/simplify the whole prediction part based on your needs. I've used a more general approach in the article.
I see, thanks a lot for taking your time on this.
My goal is to catch what is still quite "automagic" in the implementation.
I think that the official documentation is not enough to say the least.
Hi, thanks for the code and taking the time to document it so well. It's really a high quality article.
I've made some changes that might be interesting:
scroll-itemthat replaceshero-messageto make it reusable, scroll item has 2 values:measuredHeightandpredictedHeight, thescrollStrategyuses this instead ofhero-messageand you can implement it onto your objects.afterViewInitand updates the scrollItem that was passed along. So no need to recalculate or check again in the scrollStrategyupdateHeightCacheand also can do away with thedata-hm-idbecause its not needed anymore.measuredHeightis available (set by directive in 2) and use that, elsepredictedHeight.Cheers,
Elger
Thanks! Indeed, what you've proposed is the way to go, if you want a generic solution. I myself use almost the same approach with a scroll item directive on production since we need virtual scrolling in couple of places. Anyway, I intentionally wanted to go with a concrete example, as mentioned in the conclusion of the article, because it is easier to grasp the core concept this way rather than going generic. I believe/hope that the readers can conclude the rest themselves, as you did.
Few notes though:
afterViewInitis definitely more inline with Angular compared to the DOM operations that I used. Have to keep in mind that the children of the scroll item might not be rendered at that time though. This might very well be valid for the direct DOM tree peek too, but it's probably harder to verify given you'll need to explore the internals of the virtual scroll viewport. The newafterRenderhook might come handy here, I think.O(1)complexity, so we are good.Thanks for the input!
Hello. Thank you so much for the wonderful article. Thanks to you, I successfully implemented Dynamic Size Virtual Scroll! My approach seemed to be generalizable, so I’ve made it into a library. If you’re interested, please take a look.
github.com/rdlabo-team/ionic-angul...
That's great! For sure, your interpretation/approach is a valid and nice solution to the problem.
Amazing article. Thank you a lot
Thank you very much for the investment
An excellent article that explains in detail
a question
I want to apply the same thing only in reverse
Something like WhatsApp.
What is the direction I need to think about in order to implement this with this code you provided?
Thank you very much and much appreciation
Glad that it was helpful to you. As for your question – from what I understand, you need a chat/messages feed. I think that the strategy shouldn't matter in your case since it doesn't care about the scroll direction. So, it should be rather a general problem for the
cdk-virtual-scroll-viewport. All that said, I guess you just have to scroll the viewport to the bottom upon initialization + potentially, reversing the data source list/array that you pass to the virtual scroll (you have to figure out whether that's needed at all depending on your order). Still, you can research that, in case there is a better approach, but it seems that something like this should be sufficient in your case.FInally found something interesting. My app needs this. How come the feature has not existed yet? You must be hired by angular team.