@rzdesign/ngx-category-selector

    0.1.1 • Public • Published

    NgxCategorySelector npm version

    Angular category selector component & form control.

    This library was generated with Angular CLI version 10.1.5.

    NgxCategorySelector Demo

    Installation

    npm i @rzdesign/ngx-category-selector

    How to use it

    Import NgxCategorySelectorModule in your module.

    import {NgxCategorySelectorModule} from '@rzdesign/ngx-category-selector';
    Selector: lib-ngx-category-selector
    <lib-ngx-category-selector [data]="categoryData"
                               (selection)="onCategorySelect($event)"></lib-ngx-category-selector>

    Data source example:

      categoryData: CategoryNode[] = [
        {
          id: 1, name: 'Fruits', children: [
            {
              id: 3, name: 'Tropical', children: [
                {
                  id: 9, name: 'Subtropical', children: []
                }
              ]
            },
            {id: 4, name: 'Melons', children: []},
            {id: 5, name: 'Berries', children: []},
            {id: 6, name: 'Citrus', children: []}
          ]
        },
        {
          id: 2, name: 'Vegetables', children: [
            {id: 7, name: 'Leaves', children: []},
            {id: 8, name: 'Root', children: []},
          ]
        },
      ];
     

    @Inputs()

    Input Type Required Description
    data CategoryNode[ ] YES Array of CategoryNodes
    select CategoryNode optional Preselects a category

    @Outputs()

    Output Type Required Description
    selection CategoryNode YES Emits the selected category node

    Planned features

    • add unit tests
    • implement ControlValueAccessor's setDisabledState => add ability to disable the control, add styling according to form state
    • implement ControlValueAccessor => add ability to use the component as a form control

    Examples

    Check examples by running the app.

    1. clone repo git clone https://github.com/zr87/ngx-category-selector
    2. cd to repo folder and install dependencies npm install
    3. start application: ng serve

    Examples are under src/app/app.component.ts

    📬 License & Postcardware

    The package is completely free (MIT license) to use, however the package is licensed as Postcardware. This means that if it makes it to your production environment, we would very much appreciate receiving a postcard from your hometown.

    RZdesign, Becsi way 225 8/45, 1032 Budapest, Hungary

    Install

    npm i @rzdesign/ngx-category-selector

    DownloadsWeekly Downloads

    12

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • rz87