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

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

Code ExplorerCode

Interactive SandboxSandbox

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

import { Component } from '@angular/core'
import { RouterLink, RouterOutlet } from '@angular/router'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `
    <p>
      These components are using <strong>dynamic</strong> sizes. This means that
      each element's exact dimensions are unknown when rendered. An estimated
      dimension is used to get an a initial measurement, then this measurement
      is readjusted on the fly as each element is rendered.
    </p>

    <ul>
      <li><a routerLink="./">List</a></li>
      <li><a routerLink="./window-list">List - window as scroller</a></li>
      <li><a routerLink="./columns">Column</a></li>
      <li><a routerLink="./grid">Grid</a></li>
    </ul>

    <router-outlet />
  `,
  styles: [],
})
export class AppComponent {}


import { Component } from '@angular/core'
import { RouterLink, RouterOutlet } from '@angular/router'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `
    <p>
      These components are using <strong>dynamic</strong> sizes. This means that
      each element's exact dimensions are unknown when rendered. An estimated
      dimension is used to get an a initial measurement, then this measurement
      is readjusted on the fly as each element is rendered.
    </p>

    <ul>
      <li><a routerLink="./">List</a></li>
      <li><a routerLink="./window-list">List - window as scroller</a></li>
      <li><a routerLink="./columns">Column</a></li>
      <li><a routerLink="./grid">Grid</a></li>
    </ul>

    <router-outlet />
  `,
  styles: [],
})
export class AppComponent {}

Variable

Padding

Partners Become a Partner

scarf analytics