🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@tanstack/angular-virtual

Package Overview
Dependencies
Maintainers
2
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/angular-virtual - npm Package Compare versions

Comparing version
3.10.2
 to
3.10.3
+9
build/index.d.ts
import { PartialKeys, VirtualizerOptions } from '@tanstack/virtual-core';
export * from '@tanstack/virtual-core';
export * from './types';
import { ElementRef } from '@angular/core';
import { AngularVirtualizer } from './types';
export declare function injectVirtualizer<TScrollElement extends Element, TItemElement extends Element>(options: () => PartialKeys<Omit<VirtualizerOptions<TScrollElement, TItemElement>, 'getScrollElement'>, 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'> & {
scrollElement: ElementRef<TScrollElement> | TScrollElement | undefined;
}): AngularVirtualizer<TScrollElement, TItemElement>;
export declare function injectWindowVirtualizer<TItemElement extends Element>(options: () => PartialKeys<VirtualizerOptions<Window, TItemElement>, 'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'>): AngularVirtualizer<Window, TItemElement>;
+4
build/proxy.d.ts
import { WritableSignal } from '@angular/core';
import { Virtualizer } from '@tanstack/virtual-core';
import { AngularVirtualizer } from './types';
export declare function proxyVirtualizer<V extends Virtualizer<any, any>, S extends Element | Window = V extends Virtualizer<infer U, any> ? U : never, I extends Element = V extends Virtualizer<any, infer U> ? U : never>(virtualizerSignal: WritableSignal<V>, lazyInit: () => V): AngularVirtualizer<S, I>;
+130
build/README.md
# Angular Virtual
Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Angular, while maintaining complete control over markup and styles.
# Quick Start
> NOTE: Angular Virtual requires Angular 17.
1. Install `@tanstack/angular-virtual`
```bash
$ npm i @tanstack/angular-virtual
```
or
```bash
$ pnpm add @tanstack/angular-virtual
```
or
```bash
$ yarn add @tanstack/angular-virtual
```
or
```bash
$ bun add @tanstack/angular-virtual
```
2. Inject a virtualizer
`@tanstack/angular-virtual` utilizes a helper function `injectVirtualizer` to create the virtualizer and integrate it with the component lifecycle:
```ts
import { Component, ElementRef, viewChild } from '@angular/core'
import { injectVirtualizer } from '@tanstack/angular-virtual'
@Component({
selector: 'my-virtualized-list',
template: `
<div
#scrollElement
style="height: 400px; border: 1px solid gray; overflow: auto;"
>
<div
style="position: relative; width: 100%;"
[style.height.px]="virtualizer.getTotalSize()"
>
@for (row of virtualizer.getVirtualItems(); track row.index) {
<div
style="position: absolute; top: 0; left: 0; width: 100%; height: 35px"
[style.transform]="'translateY(' + row.start + 'px)'"
>
Row {{ row.index }}
</div>
}
</div>
</div>
`,
})
export class MyVirtualizedList {
scrollElement = viewChild<ElementRef<HTMLDivElement>>('scrollElement')
virtualizer = injectVirtualizer(() => ({
scrollElement: this.scrollElement(),
count: 1000,
estimateSize: () => 35,
overscan: 5,
}))
}
```
Note that a [ViewChild](https://angular.dev/api/core/viewChild) is used to get a reference to the scrolling container to allow the virtualizer to interact with it. The adapter will automatically unwrap the [ElementRef](https://angular.dev/api/core/ElementRef) for you.
You can also create a virtualizer that attaches to the Window with `injectWindowVirtualizer`:
```ts
import { Component } from '@angular/core'
import { injectWindowVirtualizer } from '@tanstack/angular-virtual'
@Component({
selector: 'my-window-virtualized-list',
template: `
<div
style="position: relative; width: 100%;"
[style.height.px]="virtualizer.getTotalSize()"
>
@for (row of virtualizer.getVirtualItems(); track row.index) {
<div
style="position: absolute; top: 0; left: 0; width: 100%; height: 35px"
[style.transform]="'translateY(' + row.start + 'px)'"
>
Row {{ row.index }}
</div>
}
</div>
`,
})
export class MyWindowVirtualizedList {
virtualizer = injectWindowVirtualizer(() => ({
count: 1000,
estimateSize: () => 35,
overscan: 5,
}))
}
```
3. If you need to update options on your virtualizer dynamically, make sure to use signals.
```ts
import { Component, input } from '@angular/core'
import { injectWindowVirtualizer } from '@tanstack/angular-virtual'
@Component({...})
export class MyVirtualizedList {
items = input<Array<string>>()
virtualizer = injectVirtualizer(() => ({
scrollElement: this.scrollElement(),
count: this.items().length,
estimateSize: () => 35,
overscan: 5,
}))
}
```
For more examples and detailed usage, visit the [official documentation](https://tanstack.com/virtual/latest).
+13
build/types.d.ts
import { Signal } from '@angular/core';
import { Virtualizer } from '@tanstack/virtual-core';
export type AngularVirtualizer<TScrollElement extends Element | Window, TItemElement extends Element> = Omit<Virtualizer<TScrollElement, TItemElement>, 'getTotalSize' | 'getVirtualItems' | 'isScrolling' | 'options' | 'range' | 'scrollDirection' | 'scrollElement' | 'scrollOffset' | 'scrollRect'> & {
getTotalSize: Signal<ReturnType<Virtualizer<TScrollElement, TItemElement>['getTotalSize']>>;
getVirtualItems: Signal<ReturnType<Virtualizer<TScrollElement, TItemElement>['getVirtualItems']>>;
isScrolling: Signal<Virtualizer<TScrollElement, TItemElement>['isScrolling']>;
options: Signal<Virtualizer<TScrollElement, TItemElement>['options']>;
range: Signal<Virtualizer<TScrollElement, TItemElement>['range']>;
scrollDirection: Signal<Virtualizer<TScrollElement, TItemElement>['scrollDirection']>;
scrollElement: Signal<Virtualizer<TScrollElement, TItemElement>['scrollElement']>;
scrollOffset: Signal<Virtualizer<TScrollElement, TItemElement>['scrollOffset']>;
scrollRect: Signal<Virtualizer<TScrollElement, TItemElement>['scrollRect']>;
};
+130
README.md
# Angular Virtual
Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Angular, while maintaining complete control over markup and styles.
# Quick Start
> NOTE: Angular Virtual requires Angular 17.
1. Install `@tanstack/angular-virtual`
```bash
$ npm i @tanstack/angular-virtual
```
or
```bash
$ pnpm add @tanstack/angular-virtual
```
or
```bash
$ yarn add @tanstack/angular-virtual
```
or
```bash
$ bun add @tanstack/angular-virtual
```
2. Inject a virtualizer
`@tanstack/angular-virtual` utilizes a helper function `injectVirtualizer` to create the virtualizer and integrate it with the component lifecycle:
```ts
import { Component, ElementRef, viewChild } from '@angular/core'
import { injectVirtualizer } from '@tanstack/angular-virtual'
@Component({
selector: 'my-virtualized-list',
template: `
<div
#scrollElement
style="height: 400px; border: 1px solid gray; overflow: auto;"
>
<div
style="position: relative; width: 100%;"
[style.height.px]="virtualizer.getTotalSize()"
>
@for (row of virtualizer.getVirtualItems(); track row.index) {
<div
style="position: absolute; top: 0; left: 0; width: 100%; height: 35px"
[style.transform]="'translateY(' + row.start + 'px)'"
>
Row {{ row.index }}
</div>
}
</div>
</div>
`,
})
export class MyVirtualizedList {
scrollElement = viewChild<ElementRef<HTMLDivElement>>('scrollElement')
virtualizer = injectVirtualizer(() => ({
scrollElement: this.scrollElement(),
count: 1000,
estimateSize: () => 35,
overscan: 5,
}))
}
```
Note that a [ViewChild](https://angular.dev/api/core/viewChild) is used to get a reference to the scrolling container to allow the virtualizer to interact with it. The adapter will automatically unwrap the [ElementRef](https://angular.dev/api/core/ElementRef) for you.
You can also create a virtualizer that attaches to the Window with `injectWindowVirtualizer`:
```ts
import { Component } from '@angular/core'
import { injectWindowVirtualizer } from '@tanstack/angular-virtual'
@Component({
selector: 'my-window-virtualized-list',
template: `
<div
style="position: relative; width: 100%;"
[style.height.px]="virtualizer.getTotalSize()"
>
@for (row of virtualizer.getVirtualItems(); track row.index) {
<div
style="position: absolute; top: 0; left: 0; width: 100%; height: 35px"
[style.transform]="'translateY(' + row.start + 'px)'"
>
Row {{ row.index }}
</div>
}
</div>
`,
})
export class MyWindowVirtualizedList {
virtualizer = injectWindowVirtualizer(() => ({
count: 1000,
estimateSize: () => 35,
overscan: 5,
}))
}
```
3. If you need to update options on your virtualizer dynamically, make sure to use signals.
```ts
import { Component, input } from '@angular/core'
import { injectWindowVirtualizer } from '@tanstack/angular-virtual'
@Component({...})
export class MyVirtualizedList {
items = input<Array<string>>()
virtualizer = injectVirtualizer(() => ({
scrollElement: this.scrollElement(),
count: this.items().length,
estimateSize: () => 35,
overscan: 5,
}))
}
```
For more examples and detailed usage, visit the [official documentation](https://tanstack.com/virtual/latest).
+2
-4
package.json
{
"name": "@tanstack/angular-virtual",
"version": "3.10.2",
"version": "3.10.3",
"description": "Headless UI for virtualizing scrollable elements in Angular",

@@ -40,5 +40,3 @@ "author": "Garrett Darnell",

"files": [
"build",
"!**/*.d.ts",
"!**/*.d.ts.map"
"build"
],

@@ -45,0 +43,0 @@ "dependencies": {