📄 tanstack/virtual/latest/docs/framework/angular/examples/variable

=============================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

.devcontainer
src
- app
  - app.component.ts
  - column-virtualizer-variable.component.ts
  - grid-virtualizer-variable.component.ts
  - row-virtualizer-variable.component.ts
- favicon.ico
- index.html
- main.ts
- styles.css
.gitignore
README.md
angular.json
package.json
tsconfig.app.json
tsconfig.json

import { ChangeDetectionStrategy, Component } from '@angular/core'

import { ColumnVirtualizerVariable } from './column-virtualizer-variable.component'
import { GridVirtualizerVariable } from './grid-virtualizer-variable.component'
import { RowVirtualizerVariable } from './row-virtualizer-variable.component'

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [\
    ColumnVirtualizerVariable,\
    GridVirtualizerVariable,\
    RowVirtualizerVariable,\
  ],
  template: `
    <p>
      These components are using <strong>variable</strong> sizes. This means
      that each element has a unique, but knowable dimension at render time.
    </p>

    <row-virtualizer-variable [rows]="rows" />
    <column-virtualizer-variable [columns]="columns" />
    <grid-virtualizer-variable [columns]="columns" [rows]="rows" />
  `,
  styles: [],
})
export class AppComponent {
  rows = new Array(10000)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 100))

  columns = new Array(10000)
    .fill(true)
    .map(() => 75 + Math.round(Math.random() * 100))
}


import { ChangeDetectionStrategy, Component } from '@angular/core'

import { ColumnVirtualizerVariable } from './column-virtualizer-variable.component'
import { GridVirtualizerVariable } from './grid-virtualizer-variable.component'
import { RowVirtualizerVariable } from './row-virtualizer-variable.component'

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [\
    ColumnVirtualizerVariable,\
    GridVirtualizerVariable,\
    RowVirtualizerVariable,\
  ],
  template: `
    <p>
      These components are using <strong>variable</strong> sizes. This means
      that each element has a unique, but knowable dimension at render time.
    </p>

    <row-virtualizer-variable [rows]="rows" />
    <column-virtualizer-variable [columns]="columns" />
    <grid-virtualizer-variable [columns]="columns" [rows]="rows" />
  `,
  styles: [],
})
export class AppComponent {
  rows = new Array(10000)
    .fill(true)
    .map(() => 25 + Math.round(Math.random() * 100))

  columns = new Array(10000)
    .fill(true)
    .map(() => 75 + Math.round(Math.random() * 100))
}

Fixed

Dynamic

Partners Become a Partner

scarf analytics