https://github.com/ryaa/ionic3-multi-level-select
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.
https://github.com/ryaa/ionic3-multi-level-select
angular5 hierarchical-select ionic3 multi-level-dropdown multi-level-select multi-level-tree-menu
Last synced: 8 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ryaa/ionic3-multi-level-select
- Owner: ryaa
- License: mit
- Archived: true
- Created: 2018-09-17T07:08:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T15:30:49.000Z (over 3 years ago)
- Last Synced: 2024-10-02T06:21:57.876Z (over 1 year ago)
- Topics: angular5, hierarchical-select, ionic3, multi-level-dropdown, multi-level-select, multi-level-tree-menu
- Language: TypeScript
- Size: 2.31 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
## Demo
Please see:
* sources for the [demo project](https://github.com/ryaa/ionic3-multi-level-select-demo). Please note that it shows regular and lazy loaded usage scenarios
* run it at [stackblitz](https://stackblitz.com/edit/ionic3-multi-level-select). 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`
```typescript
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
```html
Control Label
" [lookups]="">
```
and
1) (assuming you use reactive form) set the control value as `{ id: , 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 ;)