ngx-category-scroll

📦 NgxCategoryScroll - Angular Scrollable Category Component

NgxCategoryScroll is a reusable Angular component that displays a list of categories with items. It supports synchronized scrolling and selection between a horizontal category list and a vertical item list. When you scroll the item list, the corresponding category is automatically highlighted. You can also click on a category to scroll to its section smoothly.

🧩 Features

• 🔁 Two-way scroll sync between category header and item list
• 🎯 Auto highlight based on scroll position
• 🧭 Smooth scrolling to selected category
• 🧪 ViewChild and Intersection-based section tracking
• ✅ Works with dynamic category data via @Input()

🚀 Getting Started

1. Install & Declare

Make sure your Angular module includes:

import { NgxCategoryScroll } from './path-to-component/ngx-category-scoll.component';

@NgModule({
  declarations: [NgxCategoryScroll],
  imports: [CommonModule],
  exports: [NgxCategoryScroll]
})
export class YourModule {}


<ngx-category-scroll [data]="categories" [listContainerCss]="'custom-scroll-style'"></ngx-category-scroll>

Data Structure

[
  {
    id: number;
    name: string;
    items: {
      id: number;
      name: string;
    }[];
  }
]

🔌 Inputs & Outputs

✅ Inputs

data (any[]) Required. An array of category objects. Each category should have an id, name, and an items array containing objects with id and name.

listContainerCss (string) Optional. Allows you to apply a custom CSS class to the scrollable item list container (the bottom section).

categoryContainerCss (string) Optional. Allows you to apply a custom CSS class to the category bar container (the top horizontal section).

template: TemplateRef Type: TemplateRef Optional: Yes Description: Allows you to apply a custom layout for each item rendered in the component.

When provided, this template will be used to render each item in the list. The component will inject the current item context (let-item) into the template using Angular's *ngTemplateOutlet.

📤 Outputs

selectedCategory (EventEmitter) Emits the category object when a category is selected (either by scrolling or clicking).

selectedItem (EventEmitter) Emits the item object when a specific item is selected (you can hook this up to click events on individual items if implemented).

🧠 How It Works The top horizontal scroll bar shows category names.

The bottom scrollable section displays items under each category.

When you scroll the item list (bottomScroll), it uses the top 70% of the visible area to determine the active category and highlights it.

When you click a category, the item list scrolls to the corresponding section using scrollIntoView().