Skip to content

Commit 1043bd7

Browse files
garrettldgarrettld
authored
feat(angular-virtual): add Angular adapter (#726)
1 parent aff750d commit 1043bd7

File tree

139 files changed

+13843
-2890
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

139 files changed

+13843
-2890
lines changed

‎docs/config.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@
2222
}
2323
]
2424
},
25+
{
26+
"label": "angular",
27+
"children": [
28+
{
29+
"label": "Angular Virtual",
30+
"to": "framework/angular/angular-virtual"
31+
}
32+
]
33+
},
2534
{
2635
"label": "solid",
2736
"children": [
@@ -59,6 +68,47 @@
5968
"label": "Examples",
6069
"children": [],
6170
"frameworks": [
71+
{
72+
"label": "angular",
73+
"children": [
74+
{
75+
"to": "framework/angular/examples/fixed",
76+
"label": "Fixed"
77+
},
78+
{
79+
"to": "framework/angular/examples/variable",
80+
"label": "Variable"
81+
},
82+
{
83+
"to": "framework/angular/examples/dynamic",
84+
"label": "Dynamic"
85+
},
86+
{
87+
"to": "framework/angular/examples/padding",
88+
"label": "Padding"
89+
},
90+
{
91+
"to": "framework/angular/examples/sticky",
92+
"label": "Sticky"
93+
},
94+
{
95+
"to": "framework/angular/examples/infinite-scroll",
96+
"label": "Infinite Scroll"
97+
},
98+
{
99+
"to": "framework/angular/examples/smooth-scroll",
100+
"label": "Smooth Scroll"
101+
},
102+
{
103+
"to": "framework/angular/examples/table",
104+
"label": "Table"
105+
},
106+
{
107+
"to": "framework/angular/examples/window",
108+
"label": "Window"
109+
}
110+
]
111+
},
62112
{
63113
"label": "react",
64114
"children": [

‎docs/framework/angular/angular-virtual.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Angular Virtual
3+
---
4+
5+
The `@tanstack/angular-virtual` adapter is a wrapper around the core virtual logic.
6+
7+
## `injectVirtualizer`
8+
9+
```ts
10+
function injectVirtualizer<TScrollElement, TItemElement = unknown>(
11+
options: PartialKeys<
12+
Omit<VirtualizerOptions<TScrollElement, TItemElement>, 'getScrollElement'>,
13+
'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
14+
> & { scrollElement: ElementRef<TScrollElement> | TScrollElement | undefined },
15+
): AngularVirtualizer<TScrollElement, TItemElement>
16+
```
17+
18+
This function returns an `AngularVirtualizer` instance configured to work with an HTML element as the scrollElement.
19+
20+
## `injectWindowVirtualizer`
21+
22+
```ts
23+
function injectWindowVirtualizer<TItemElement = unknown>(
24+
options: PartialKeys<
25+
VirtualizerOptions<Window, TItemElement>,
26+
| 'getScrollElement'
27+
| 'observeElementRect'
28+
| 'observeElementOffset'
29+
| 'scrollToFn'
30+
>,
31+
): AngularVirtualizer<Window, TItemElement>
32+
```
33+
34+
This function returns a window-based `AngularVirtualizer` instance configured to work with the window as the scrollElement.

‎docs/installation.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ $ npm install @tanstack/vue-virtual
3636
$ npm install @tanstack/lit-virtual
3737
```
3838

39+
## Angular Virtual
40+
41+
```bash
42+
$ npm install @tanstack/angular-virtual
43+
```
44+
3945
## Virtual Core (no framework)
4046

4147
```bash

‎docs/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Introduction
33
---
44

5-
TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte, Solid and Lit. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation.
5+
TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte, Solid, Lit, and Angular. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation.
66

77
## The Virtualizer
88

‎examples/angular/dynamic/.devcontainer/devcontainer.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Node.js",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:18"
4+
}

‎examples/angular/dynamic/.gitignore

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎examples/angular/dynamic/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# @tanstack/virtualExampleAngularDynamic
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

‎examples/angular/dynamic/angular.json

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "pnpm",
6+
"analytics": false,
7+
"cache": {
8+
"enabled": false
9+
}
10+
},
11+
"newProjectRoot": "projects",
12+
"projects": {
13+
"@tanstack/virtual-example-angular-dynamic": {
14+
"projectType": "application",
15+
"root": "",
16+
"sourceRoot": "src",
17+
"prefix": "app",
18+
"architect": {
19+
"build": {
20+
"builder": "@angular-devkit/build-angular:application",
21+
"options": {
22+
"outputPath": "dist/tanstack/virtual-example-angular-dynamic",
23+
"index": "src/index.html",
24+
"browser": "src/main.ts",
25+
"polyfills": ["zone.js"],
26+
"tsConfig": "tsconfig.app.json",
27+
"assets": ["src/favicon.ico"],
28+
"styles": ["src/styles.css"],
29+
"scripts": []
30+
},
31+
"configurations": {
32+
"production": {
33+
"outputHashing": "all"
34+
},
35+
"development": {
36+
"optimization": false,
37+
"extractLicenses": false,
38+
"sourceMap": true
39+
}
40+
},
41+
"defaultConfiguration": "production"
42+
},
43+
"serve": {
44+
"builder": "@angular-devkit/build-angular:dev-server",
45+
"configurations": {
46+
"production": {
47+
"buildTarget": "@tanstack/virtual-example-angular-dynamic:build:production"
48+
},
49+
"development": {
50+
"buildTarget": "@tanstack/virtual-example-angular-dynamic:build:development"
51+
}
52+
},
53+
"defaultConfiguration": "development"
54+
},
55+
"extract-i18n": {
56+
"builder": "@angular-devkit/build-angular:extract-i18n",
57+
"options": {
58+
"buildTarget": "@tanstack/virtual-example-angular-dynamic:build"
59+
}
60+
}
61+
}
62+
}
63+
}
64+
}

‎examples/angular/dynamic/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "@tanstack/virtual-example-angular-dynamic",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development"
9+
},
10+
"private": true,
11+
"dependencies": {
12+
"@angular/animations": "^17.3.0",
13+
"@angular/common": "^17.3.0",
14+
"@angular/compiler": "^17.3.0",
15+
"@angular/core": "^17.3.0",
16+
"@angular/forms": "^17.3.0",
17+
"@angular/platform-browser": "^17.3.0",
18+
"@angular/platform-browser-dynamic": "^17.3.0",
19+
"@angular/router": "^17.3.0",
20+
"@faker-js/faker": "^8.4.1",
21+
"rxjs": "^7.8.0",
22+
"@tanstack/angular-virtual": "3.9.0",
23+
"tslib": "^2.6.3",
24+
"zone.js": "0.14.3"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^17.3.0",
28+
"@angular/cli": "^17.3.0",
29+
"@angular/compiler-cli": "^17.3.0",
30+
"typescript": "5.2.2"
31+
}
32+
}

‎examples/angular/dynamic/src/app/app.component.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component } from '@angular/core'
2+
import { RouterLink, RouterOutlet } from '@angular/router'
3+
4+
@Component({
5+
selector: 'app-root',
6+
standalone: true,
7+
imports: [RouterLink, RouterOutlet],
8+
template: `
9+
<p>
10+
These components are using <strong>dynamic</strong> sizes. This means that
11+
each element's exact dimensions are unknown when rendered. An estimated
12+
dimension is used to get an a initial measurement, then this measurement
13+
is readjusted on the fly as each element is rendered.
14+
</p>
15+
16+
<ul>
17+
<li><a routerLink="./">List</a></li>
18+
<li><a routerLink="./window-list">List - window as scroller</a></li>
19+
<li><a routerLink="./columns">Column</a></li>
20+
<li><a routerLink="./grid">Grid</a></li>
21+
</ul>
22+
23+
<router-outlet />
24+
`,
25+
styles: [],
26+
})
27+
export class AppComponent {}

‎examples/angular/dynamic/src/app/app.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ApplicationConfig } from '@angular/core'
2+
import { provideRouter } from '@angular/router'
3+
4+
import { routes } from './app.routes'
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [provideRouter(routes)],
8+
}

‎examples/angular/dynamic/src/app/app.routes.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Routes } from '@angular/router'
2+
import { RowVirtualizerDynamic } from './row-virtualizer-dynamic.component'
3+
import { GridVirtualizerDynamic } from './grid-virtualizer-dynamic.component'
4+
import { ColumnVirtualizerDynamic } from './column-virtualizer-dynamic.component'
5+
import { RowVirtualizerDynamicWindow } from './row-virtualizer-dynamic-window.component'
6+
7+
export const routes: Routes = [
8+
{
9+
path: '',
10+
component: RowVirtualizerDynamic,
11+
},
12+
{
13+
path: 'window-list',
14+
component: RowVirtualizerDynamicWindow,
15+
},
16+
{
17+
path: 'columns',
18+
component: ColumnVirtualizerDynamic,
19+
},
20+
{
21+
path: 'grid',
22+
component: GridVirtualizerDynamic,
23+
},
24+
]

0 commit comments

Comments
 (0)