ericferreira1992 / ag-virtual-scroll Goto Github PK

View Code? Open in Web Editor NEW

24.0 24.0 8.0 14.93 MB

Component of virtual-scroll. It easy to use and works light and clean. He also work with differents items height.

Home Page: https://ericferreira1992.github.io/ag-virtual-scroll/

License: MIT License

JavaScript 0.18% TypeScript 72.37% HTML 14.93% SCSS 12.52%

ag-virtual-scroll's Introduction

Nimble Project

This project was generated with Nimble CLI version 1.3.5.

Development server

Run nb serve for a dev server. Navigate to http://localhost:8090/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run nb, after select Generate option.

Build

Run nb build to build the project. The build artifacts will be stored in the build/ directory. Use the --env flag for a specific environment build, for example --env=prod, the --env=local is default.

ag-virtual-scroll's People

Contributors

Stargazers

Watchers

Forkers

pedrovsp jordi72 andersoonalves beratkara graphefruit duyjack magnet-sys skabhiyanta

ag-virtual-scroll's Issues

Scroll to index or item

I think it would be a good idea to provide a function that allows scrolling to an index or item provided by the user.

Sticky element should stick to bottom o thef list when scrolling up the list

Input and output properties of virtual scroll are private

Cant bind from html to components properties. Angular says it's private. Angular 11+
html:

<ag-virtual-scroll #vs [items]="items" [height]="myHeight" [min-row-height]="minRow" class="box-border">
</ag-virtual-scroll>

At source code:

@Input('min-row-height') private minRowHeight: number = 40;
@Input('height') private height: string = 'auto';
@Input('items') private originalItems: any[] = [];

Thanks for component.

Update dependency to Angular 16

Hey there :)
This plugin is still awesome, I'm using it now for more then one year daily!
After I've been upgrading to Angular 16 today, I'd be happy if this plugin would update the dependencies to 16 instead of 15, so NPM fixes is not needed anymore.
Thank you!
Lars

peerDependencies for angular 17

The package listed in npm has these peerDependencies:

"peerDependencies": {
    "@angular/common": "^16.2.0",
    "@angular/core": "^16.2.0"
  },

however the readme says it should work with angular 17.
I get this error when I am trying to update to 1.7 (after updating angular to 17):

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^17.0.0 || ^18.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"^17.2.1" from the root project
npm ERR!   peer @angular/common@"17.2.3" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     peer @angular/forms@"^17.0.0" from @ng-bootstrap/[email protected]
npm ERR!     node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!       @ng-bootstrap/ng-bootstrap@"^16.0.0" from the root project
npm ERR!     peer @angular/forms@">=9.0.0" from [email protected]
npm ERR!     node_modules/ngx-color-picker
npm ERR!       ngx-color-picker@"^16.0.0" from the root project
npm ERR!     1 more (the root project)
npm ERR!   11 more (@angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^16.2.0" from [email protected]
npm ERR! node_modules/ag-virtual-scroll
npm ERR!   ag-virtual-scroll@"^1.7.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^16.2.0" from [email protected]
npm ERR!   node_modules/ag-virtual-scroll
npm ERR!     ag-virtual-scroll@"^1.7.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Are you able to fix them or is 16 there for a purpose?

Cache system and pre-loading

Hello,
Do you think it would be possible to have a system that caches old loaded data ?
With the possibility of invalidating the cache (in case of page change).

This cache system would make it possible to no longer have to re-create the components, especially in the event of an ecoponent creation via the TemplateRef.createComponent.

Best Regards,

Support for Angular 16.x.x

I do not know if is the Angular version the problem but on my project ag-virtual-scroll do not work, no item is rendered.

my html:

<div class="container-fluid position-absolute dark p-0 m-0" [style.top]="listYpos" >
  <!-- Qui la lista -->
  <ag-virtual-scroll #vs [items]="vetScatole" [min-row-height]="105" [style.minHeight]="listMaxHeight" class="bg-info">
    <div *ngFor="let scatola of vs.items; let ActIx = index" (click)="IDScatolaSelezinata = scatola.ID" >
        <!-- Utilizza il componente ComplexItem per ogni elemento complesso -->
        <app-scatola [Ix]='ActIx' 
                    [Barcode]="scatola.Barcode"
                    [DataOra]="scatola.DataOra"
                    [Stato]="scatola.Stato"
                    [StatoDesc]="scatola.StatoDesc"
                    [InfoErrore]="scatola.InfoErrore"
                    [flgSelected]="IDScatolaSelezinata===scatola.ID"
                    [flgNuova]="scatola.flgNuovo"></app-scatola>
    </div>
  </ag-virtual-scroll>
  <!-- Fine della lista -->
</div>

Implement scrollTo method or introduce start-index attribute

I tried using the package and it almost fully covers my needs. What I need more is a way to make the scroll show a particular item which is not currently visible.
Both a programatic way or a variable binding with an attribute would make sense for me.
Something like a scrollTo method or a start-index attribute which informs the scroll from which row to start. But this should be able to be changed dynamically and the scroll should be able to change the offset if the variable changes.

Set scroll position?

Hello, I would like to know if there is a possibility to set the scroll position when starting the list or after an action. Is there any way to do it?

Please add the licence file here

Hi there!
Thanks for this wonderful plugin, it works realy realy good.
From the npm-registry it says "MIT-Licence", therefore could you please add this licence-file on this repo aswell?
Thanks!
Lars

Sticky element

Could you please improve component to support position sticky?
Something like this

However, the sticky element disappears when scrolled out of viewport.

So the sticky element in the list (for example a selected list item) should kept in the DOM and not taken out when scrolling around the list.

Not compatible with angular 12

Depency problem with angular animation

Only displaying 3 items with height 100%

Hey Eric,

Thank you for your response.

1.) I am using angular 14. If I use min-row-height the application doesn't compile.
<ag-virtual-scroll #vs [items]="caseItems" height="100%" min-row-height="50" class="box-border">
<ui-case-list-item
*ngFor="let item of vs.items"
[case]="item"
>

If I use 100% in height, I only can see 3 items. I think it because of the min-row-height. Did you have a similar problem?

Thank you and best regards

Originally posted by @Ancadea in #14 (comment)

Hello @ericferreira1992 I'm using your virtual-scroll package and works as a charm. But still I have the same issue as @Ancadea commented. If I set the element height to 100% I'm only able to see 3 items. If i scroll a tiny bit it autosizes the column to the expected height.
What could be happening?

My list is displayed on a container with auto-calculated height and if I set the element .item-container to be 100% in css does fill the space but only 3 elements are rendered.

<ag-virtual-scroll
  #vs
  [items]="items"
  min-row-height="109"
  height="100%"
  class="box-border"
>
   <item-card
      *ngFor="let item of vs.items; trackBy: trackByItemFn"
      [attr.data-testid]="'item-card'"
      [card]="item"
      (itemClicked)="
         onClickItemCard({ event: $event, columnId: groupItem.id })
       "
       [hiddenDeleteButton]="
          facade.filters.grouped_by !== 'aggregation_level'
       "
       (deleteItemClicked)="onClickDeleteItemCard($event, groupItem.id)"
    >
    </item-card>
 </ag-virtual-scroll>

I've been testing with the released version 1.5.2 with angular 14+
Thank you very much!

Typerorr: cannot read property kind of undefined Angular 7

ERROR in ./node_modules/ag-virtual-scroll/fesm5/ag-virtual-scroll.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
    at visitNodes (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16144:30)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16370:24)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16265:21)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16322:24)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16333:24)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16229:21)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNodes (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16144:30)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16379:24)
    at checkNodeForDecorators (/home/dion/website/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/home/dion/website/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16377:21)

My Angular Package:

@angular-devkit/architect          0.13.10
@angular-devkit/build-angular      0.13.10
@angular-devkit/build-ng-packagr   0.13.10
@angular-devkit/build-optimizer    0.13.10
@angular-devkit/build-webpack      0.13.10
@angular-devkit/core               7.3.10
@angular-devkit/schematics         7.3.10
@angular/cdk                       7.3.7
@angular/cli                       7.3.10
@angular/fire                      5.4.2
@angular/flex-layout               7.0.0-beta.24
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.10
@schematics/angular                7.3.10
@schematics/update                 0.13.10
ng-packagr                         4.7.1
rxjs                               6.6.2
typescript                         3.1.6
webpack                            4.29.0

Step to reproduce:
ng build --prod

height & min-row-height

Hey,

Thank you for your ag-virtual-scroll package!
I have two questions:
1.) The min-row-height is not working. I always receive this error message: Type 'string' is not assignable to type 'number'.
2.) Is it possible to use percentage values in height?

Thank you

Unable to install

Hi, Thanks for this beautiful plugin. I was unable to install this package.
can you please help me with this?

AgVirtualSrollComponent typo

Hey, I thought you might want to change the name of the component called currently AgVirtualSrollComponent into AgVirtualScrollComponent. thanks! ;)

Error when fast scroll to bottom

Hello,
Thank you for your ag-virtual-scroll package!

When using it, I had an issue: when scrolling too fast to the bottom it will have a space like this

But if I scroll slowly then everything works fine

Thank you

Compile fails after updating vom 1.3.0 to 1.3.2

Hi there!
I just wanted to update to the latest version, but when compiling with ionic-framework it says:

[ng] Compiling ag-virtual-scroll : module as esm5
[ng] Warning: Invalid constructor parameter decorator in /xxx/node_modules/ag-virtual-scroll/fesm2015/ag-virtual-scroll.js:
[ng]  () => [
[ng]     { type: ElementRef },
[ng]     { type: ApplicationRef }
[ng] ]
[ng] Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected AgVsItemComponent to have an inner class declaration

With Version 1.3.0 the compile is working normaly

Support for angular 15 and onwards.

Hi Eric,

I'd like to ask if this library will provide support for angular 15 and onwards.

Best regards,
Michael Tan

Scroll doesn't know when to end

Hi there!
First of all:
I really really love this plugin.
I have tested all I could find, and this is the only one which is fast and handels different container heights.

Whats my use case?
I develop an Android aswell as an iOS app, where you can track all your coffee-parameters, and depending on which parameter you entered, the card-element will be bigger or smaller.

The cards are used from the ionic-framework and have margin/paddings.

The issue just occures on Android, not on iOS, nor on a normal browser.

If you scroll fast, like a fast swipe up, and the scroll-container comes to the end, he calculates and the result you can see in this video:

scrolling_issue.mp4

After I searched where this issue comes from and how to fix it I found out that all of my repeated-card had a margin-top: 10px and a margin-bottom:10px after disabling them, the scroll event worked perfectly without stutters.

Therefore my work around was to add another element with <div style="height:10px"></div> and the plugin could calculate everything exactly.

I hope this helps
Thanks for your help!
Greetings
Lars