ngx-mat-menu-infinite-scroll

ngx-mat-menu-infinite-scroll

Adds missing infinite scroll functionality for an Angular Material Menu.

Installation

npm install ngx-mat-menu-infinite-scroll@latest

Since the directive is marked as standalone you can directly import it into a module.

import { NgModule } from '@angular/core';
import { MatMenuInfiniteScrollDirective } from 'ngx-mat-menu-infinite-scroll';

@NgModule({
	declarations: [...],
	imports: [
		MatMenuInfiniteScrollDirective
	],
	exports: [...]
})
export class AppModule { }

Usage

<button
   mat-button
   [matMenuTriggerFor]="menu"
   matMenuInfiniteScroll
   (scrolled)="loadMore()"
>Menu</button>
<mat-menu #menu="matMenu">
    @for(item of items; track $index) {
	   <!-- Menu items to show... -->
    }
</mat-menu>

Optional inputs/outputs

Keyword	Function	Note
threshold	Threshold for triggering the 'scrolled' event	Default = 20, optional
debounce	Debounce time to control the frequency of emitting 'scrolled' event (in milliseconds)	Default = 500, optional
activeUntil	Input property that stops scrolling when a specified condition evaluates to false.	If the condition is false, scrolling stops., optional
(scrolled)	Event emitted when the menu content is scrolled to the specified threshold

If you like my work, you can

License

This project is licensed under the MIT License - see the LICENSE file for details.