Component

Virtual List

Virtualised list that renders only visible rows for smooth scrolling through thousands of items

import { NeuVirtualListComponent } from '@neural-ui/core/virtual-list';

10,000 virtualised items

import { NeuVirtualListComponent } from '@neural-ui/core/virtual-list';

@Component({
  imports: [NeuVirtualListComponent],
  template: `
    <neu-virtual-list
      [items]="users"
      [itemSize]="56"
      [visibleRows]="10"
      [trackBy]="trackById"
      (itemClick)="onSelect($event)"
    >
      <ng-template let-user>
        <div class="user-row">
          <strong>{{ user.name }}</strong>
          <span>{{ user.email }}</span>
        </div>
      </ng-template>
    </neu-virtual-list>
  `
})
export class UserListComponent {
  users = signal<User[]>([]);
  trackById = (_: number, u: User) => u.id;
}