Skip to content
This repository has been archived by the owner on Apr 18, 2023. It is now read-only.

This is an ionic multi level select component allowing to display hierarchical data in a mobile friendly manner. The component shows only one level and navigates to a child level when the appropriate node selected.

License

Notifications You must be signed in to change notification settings

ryaa/ionic3-multi-level-select

Repository files navigation

Ionic3 Multi Level Select

Description

Ionic multi level select components allows displaying hierarchical data in a mobile friendly manner. The component shows only one level at a time and navigates to a child level when the appropriate node selected.

Preview

preview

Demo

Please see:

  • sources for the demo project. Please note that it shows regular and lazy loaded usage scenarios
  • run it at stackblitz. Please note that it shows only regular usage scenario (since stackblitz does not support lazy loading)

Getting Started

Install using npm

$ npm install ionic3-multi-level-select --save

Add the module IonicMultiLevelSelectModule in the app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { IonicMultiLevelSelectModule } from 'ionic3-multi-level-select';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicMultiLevelSelectModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
  ],
  providers: [
  ]
})
export class AppModule {}

You may also need to import/add the MultiLevelSelectHelpers in the app.module.ts and the page that requires the helper to transform and prepare the data to be consumed by the multi level select component (see below lookups option).

Add the component to the page that requires the multi-level-select component

<ion-item>
    <ion-label>Control Label</ion-label>
    <div item-content class="multi-level-select-control-container">
        <ryaa-multi-level-select [formControlName]="<CONTROL_NAME>" [lookups]="<CONTROL_HIERARCHICAL_DATA>"></ryaa-multi-level-select>
    </div>
</ion-item>

and

  1. (assuming you use reactive form) set the control value as { id: <NUMBER>, name: <NAME> } (this must be one of the values from the lookups)
  2. lookups having hierarchical data (see below) The component will display the currently selected value and allows to clear it or select a new value. When clicked it will open a modal dialog showing the hierarchical data (with selected value if applicable).

Multi Level Select Options

lookups

The hierarchical data in the format below

[
    {
        id: 5,
        parentId: null,
        name: 'Support',
        children: [
            {
                id: 10,
                parentId: 5,
                name: 'BB',
                children: []
            },
            {
                id: 9,
                parentId: 5,
                name: 'CC',
                children: []
            },
            {
                id: 11,
                parentId: 5,
                name: 'AA',
                children: []
            }
        ]
    },
    {
        id: 6,
        parentId: null,
        name: 'ATest',
        children: [
            {
                id: 8,
                parentId: 6,
                name: 'AA',
                children: []
            },
            {
                id: 7,
                parentId: 6,
                name: 'BB',
                children: []
            },

        ]
    },
    {
        id: 2,
        parentId: null,
        name: 'HR',
        children: []
    },
    {
        id: 3,
        parentId: null,
        name: 'Network',
        children: []
    },
    {
        id: 1,
        parentId: null,
        name: 'Hardware',
        children: []
    },
    {
        id: 4,
        parentId: null,
        name: 'Software',
        children: []
    }
]

The module also contains MultiLevelSelectHelpers provider which helps to transform flat data to hierarchical to be consumed by the multi level select component. This provider has methods:

  • buildHierarchicalLookUp
    This method can transform the flat data in the format below to the hierarchical data to be consumed by the component (note that parent_id property has underscore!)
[
    {
        id: 11,
        name: 'name 11',
        parent_id: 1,
    },
    {
        id: 12,
        name: 'name 12',
        parent_id: 1,
    },
    {
        id: 13,
        name: 'name 13',
        parent_id: 1,
    },
    {
        id: 1,
        name: 'name 1',
        parent_id: null,
    },
    {
        id: 2,
        name: 'name 2',
        parent_id: null,
    },
    {
        id: 121,
        name: 'name 121',
        parent_id: 12,
    },
    {
        id: 122,
        name: 'name 122',
        parent_id: 12,
    }
]
  • sortHierarchicalLookUpAsTreeInAscOrder This method sorts the hierarchical data by property id or name

allowParent

This property determines whether the user can select only the lowest level node/item or can select any node/item in the hierarchy.

Contributing

Freely fork and submit a pull request describing what was fixed/added and link it to an issue ;)

About

This is an ionic multi level select component allowing to display hierarchical data in a mobile friendly manner. The component shows only one level and navigates to a child level when the appropriate node selected.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published