Source: https://tanstack.com/virtual/v3/docs/framework/angular/examples/sticky

TanStack

Virtual v3v3

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

Angular

Version

v3

Search...

+ K

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

• Angular Virtual
  
  angular

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  angular

• Variable
  
  angular

• Dynamic
  
  angular

• Padding
  
  angular

• Sticky
  
  angular

• Infinite Scroll
  
  angular

• Smooth Scroll
  
  angular

• Table
  
  angular

• Window
  
  angular

Framework

Angular

Version

v3

Menu

• Home

• Frameworks

• Contributors

• GitHub

• Discord

Getting Started

• Introduction
  
  core

• Installation
  
  core

• Angular Virtual
  
  angular

Core APIs

• Virtualizer
  
  core

• VirtualItem
  
  core

Examples

• Fixed
  
  angular

• Variable
  
  angular

• Dynamic
  
  angular

• Padding
  
  angular

• Sticky
  
  angular

• Infinite Scroll
  
  angular

• Smooth Scroll
  
  angular

• Table
  
  angular

• Window
  
  angular

Angular Example: Sticky

Github StackBlitz CodeSandbox

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

Code ExplorerCode

Interactive SandboxSandbox

• .devcontainer

• src

  • app

    • app.component.ts

  • favicon.ico

  • index.html

  • main.ts

  • styles.css

• .gitignore

• README.md

• angular.json

• package.json

• tsconfig.app.json

• tsconfig.json

ts

import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  computed,
  viewChild,
} from '@angular/core'
import { faker } from '@faker-js/faker'
import {
  injectVirtualizer,
  defaultRangeExtractor,
} from '@tanstack/angular-virtual'

const groupedNames: Record<string, string[]> = {}

Array.from({ length: 1000 })
  .map(() => faker.person.firstName())
  .sort()
  .forEach((name) => {
    const char = name[0]
    if (!groupedNames[char]) {
      groupedNames[char] = []
    }
    groupedNames[char].push(name)
  })
const groups = Object.keys(groupedNames)
const rows = groups.reduce(
  (acc: string[], k) => [...acc, k, ...groupedNames[k]],
  [],
)
const stickyIndexes = groups.map((gn) => rows.findIndex((n) => n === gn))
const stickyIndexesSet = new Set(stickyIndexes)
const reversedStickyIndexes = [...stickyIndexes].reverse()

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div #scrollElement class="list scroll-container">
      <div
        style="position: relative; width: 100%;"
        [style.height.px]="virtualizer.getTotalSize()"
      >
        @for (row of virtualizer.getVirtualItems(); track row.index) {
          <div
            [attr.data-index]="row.index"
            style="top: 0; left: 0; width: 100%; background: #fff"
            [style.zIndex]="isSticky(row.index) ? 1 : null"
            [style.borderBottom]="
              isSticky(row.index) ? '1px solid #ddd' : 'none'
            "
            [style.position]="isActiveSticky(row.index) ? 'sticky' : 'absolute'"
            [style.height.px]="row.size"
            [style.transform]="
              isActiveSticky(row.index)
                ? null
                : 'translateY(' + row.start + 'px)'
            "
          >
            {{ rows[row.index] }}
          </div>
        }
      </div>
    </div>
  `,
  styles: `
    .scroll-container {
      height: 300px;
      width: 400px;
      overflow: auto;
    }
  `,
})
export class AppComponent {
  rows = rows

  isSticky = (index: number) => stickyIndexesSet.has(index)

  scrollElement = viewChild<ElementRef<HTMLDivElement>>('scrollElement')

  virtualizer = injectVirtualizer(() => ({
    scrollElement: this.scrollElement(),
    count: this.rows.length,
    estimateSize: () => 50,
    rangeExtractor: (range) => {
      const next = new Set([\
        reversedStickyIndexes.find((index) => range.startIndex >= index)!,\
        ...defaultRangeExtractor(range),\
      ])
      return [...next].sort((a, b) => a - b)
    },
  }))

  activeStickyIndex = computed(() => {
    return this.virtualizer.getVirtualItems()[0]?.index
  })

  isActiveSticky = (index: number) => this.activeStickyIndex() === index
}


import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  computed,
  viewChild,
} from '@angular/core'
import { faker } from '@faker-js/faker'
import {
  injectVirtualizer,
  defaultRangeExtractor,
} from '@tanstack/angular-virtual'

const groupedNames: Record<string, string[]> = {}

Array.from({ length: 1000 })
  .map(() => faker.person.firstName())
  .sort()
  .forEach((name) => {
    const char = name[0]
    if (!groupedNames[char]) {
      groupedNames[char] = []
    }
    groupedNames[char].push(name)
  })
const groups = Object.keys(groupedNames)
const rows = groups.reduce(
  (acc: string[], k) => [...acc, k, ...groupedNames[k]],
  [],
)
const stickyIndexes = groups.map((gn) => rows.findIndex((n) => n === gn))
const stickyIndexesSet = new Set(stickyIndexes)
const reversedStickyIndexes = [...stickyIndexes].reverse()

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div #scrollElement class="list scroll-container">
      <div
        style="position: relative; width: 100%;"
        [style.height.px]="virtualizer.getTotalSize()"
      >
        @for (row of virtualizer.getVirtualItems(); track row.index) {
          <div
            [attr.data-index]="row.index"
            style="top: 0; left: 0; width: 100%; background: #fff"
            [style.zIndex]="isSticky(row.index) ? 1 : null"
            [style.borderBottom]="
              isSticky(row.index) ? '1px solid #ddd' : 'none'
            "
            [style.position]="isActiveSticky(row.index) ? 'sticky' : 'absolute'"
            [style.height.px]="row.size"
            [style.transform]="
              isActiveSticky(row.index)
                ? null
                : 'translateY(' + row.start + 'px)'
            "
          >
            {{ rows[row.index] }}
          </div>
        }
      </div>
    </div>
  `,
  styles: `
    .scroll-container {
      height: 300px;
      width: 400px;
      overflow: auto;
    }
  `,
})
export class AppComponent {
  rows = rows

  isSticky = (index: number) => stickyIndexesSet.has(index)

  scrollElement = viewChild<ElementRef<HTMLDivElement>>('scrollElement')

  virtualizer = injectVirtualizer(() => ({
    scrollElement: this.scrollElement(),
    count: this.rows.length,
    estimateSize: () => 50,
    rangeExtractor: (range) => {
      const next = new Set([\
        reversedStickyIndexes.find((index) => range.startIndex >= index)!,\
        ...defaultRangeExtractor(range),\
      ])
      return [...next].sort((a, b) => a - b)
    },
  }))

  activeStickyIndex = computed(() => {
    return this.virtualizer.getVirtualItems()[0]?.index
  })

  isActiveSticky = (index: number) => this.activeStickyIndex() === index
}

Padding

Infinite Scroll

Partners Become a Partner