ng-filter-list

NgFilterList

Description

Toggleable Menu with any number of submenus. Meant to be used with @ngrx/store, so that the toggled menu state is remembered between page changes. Optional dependency on Font Awesome for some togge indicators for the menu, which you'll have to include in your project yourself.

Installation

To install this component to an external project, follow this procedure:

1. npm install ng-filter-list --save or yarn add ng-filter-list
2. Add NgFilterListModule.forRoot() import to your @NgModule like below

   import { NgModule } from '@angular/core'
   import { BrowserModule } from '@angular/platform-browser'
   import { NgFilterListModule } from 'ng-filter-list'
   import { AppComponent } from './app.component'
   
   @NgModule({
     imports: [
       BrowserModule,
       NgFilterListModule.forRoot()
     ],
     declarations: [AppComponent],
     bootstrap: [AppComponent]
   })
   export class AppModule {}

Usage

The component takes a [menus] input that's an Array and the exported Menu interface is defined as: js interface Menu { name: string; filters: Array<string>; subMenus: Array<Menu>; }

The component outputs a FilterToggleEvent, which is also exported, defined as: js interface FilterToggleEvent { menu: string; filters: Array<string>; toggle: boolean; } So if a user collapses an entire menu of toggles, only one event is emitted.

License

License: MIT

Author

Serra Allgood