Components: virtual-scroll: add docs

[mmalerba]

Add documentation for virtual scrolling

[raygervais]

I'd be happy to help with documentation for the virtual-scroll, but can you point me in the right direction towards getting it set up? Is the next version going to introduce a change to any APIs going forward ex, renaming an attribute?

[mmalerba]

@raygervais I'm working on implementing the virtual scroll right now. It's not done yet so there's nothing to document for now. You can follow the progress on the virtual-scroll branch though: https://github.com/angular/material2/tree/virtual-scroll/src/cdk-experimental/scrolling

[darkbasic]

Hi @mmalerba
I'm writing a "Whatsapp Clone" Angular tutorial using Material (https://github.com/Urigo/whatsapp-textrepo-angularcli-express) and I would like to also implement virtual scrolling with server-side pagination.
What's the status of your work? Will it work for my use case?
Infinite scrolling will have to be mainly in the opposite direction (we pre-load the most recent messages while the older ones will be on the top).
But in general the user will have two different infinite scrolling directions: up for older messages and down for newer ones (in fact we want to open each chat exactly at the first unread message, not down to the latest one).

[mmalerba]

@darkbasic I believe it should work for your use case. You can follow the progress here: https://github.com/angular/material2/projects/20

I'm planning to merge it into master under cdk-experimental soon.

[darkbasic]

Thanks. Do you have an usage example to share?

[mmalerba]

I added some examples to the demo app on the branch I'm developing on: https://github.com/angular/material2/tree/virtual-scroll/src/demo-app/virtual-scroll

[darkbasic]

I didn't understand one thing from the previous examples: how do I notify the backend that I need to fetch more pages when the scroller approaches the end?

Also, can I scroll to the top instead of to the bottom?

[mmalerba]

@darkbasic similar to how mat-table works, you would create a DataSource subclass and in the connect method you would subscribe to the CollectionViewer and fetch more data when the CollectionViewer says that the current view is close to the end

[cyberbeast]

@mmalerba Just wondering, is/are there any instructions/documentation/tutorial of some sort that I can refer to for this? I am trying to mirror the demo app, but since the demo app does not import from an npm version of cdk/cdk-experimental I don't believe the exports are the same. :)

[mmalerba]

You can take a look at the docs here: https://beta-angular-material-io.firebaseapp.com/cdk/scrolling/overview

[cyberbeast]

@mmalerba Thank you so much for sharing this. Really appreciate it :)

[cyberbeast]

@mmalerba The stackblitz demo for the virtual scroll demo at the link you shared with me the other day seems to throw an error, but it looks more like a warning that can be suppressed. Thought I'd make you aware of that.

{"ngSyntaxError":true,"ngParseErrors":[{"span":{"start":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":77,"line":1,"col":7},"end":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":111,"line":1,"col":41},"details":null},"msg":"Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'div'.","level":1},{"span":{"start":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":72,"line":1,"col":2},"end":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":133,"line":1,"col":63},"details":null},"msg":"Property binding cdkVirtualForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".","level":1},{"span":{"start":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":0,"line":0,"col":0},"end":{"file":{"content":"\r\n
{{item}}
\r\n\r\n\r\n\r\n","url":"ng:///AppModule/CdkVirtualScrollOverviewExample.html"},"offset":68,"line":0,"col":68},"details":null},"msg":"'cdk-virtual-scroll-viewport' is not a known element:\n1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.\n2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.","level":1}]}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}