Render only visible DOM nodes within a list of elements.
Install and save the module npm install --save ngx-view-only
.
...
import { ViewOnlyModule } from 'ngx-view-only'
@NgModule({
imports: [
...
ViewOnlyModule,
...
]
})
import { ViewOnlyDirective } from 'ngx-view-only'
@Component({
...
})
...
<div viewonly [elements]="ArraySourceList" (update)="viewOnlyList = $event">
<div *ngFor="let item of viewOnlyList" [attr.ViewOnlyIndex]="item._localID">
{{item.data.title}} // title is just an example attribute
</div>
</div>
- Add
viewonly
directive - Assign the array of elements to the
elements
attribute - Assign the processed list provided through the
update
event - Generate your elements using the list from the previous step
- Each item must have a
ViewOnlyIndex
attribute with theitem._localID
- Fix AOT compatibility
- Add support for scrolling elements other than window
- Improve resize
- Unit tests