ng-bootstrap-nested-select

Installation

To install this library, run:

$ npm install ng-bootstrap-nested-select --save

Dependencies to install

$ npm install bootstrap --save

Then you'll need to add the bootstrap.min.css file if you haven't already to you angular config file

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ng-bootstrap-nested-select

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgBootstrapNestedSelectModule } from 'ng-bootstrap-nested-select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgBootstrapNestedSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inputs

Option	Type	Description
options	Array	An array of object where each must have a "name" and "options" fields
settings	NgBootstrapNestedSelectSettings	An object of settings to control the select box
default	Object	The default object to show, from the "options" list
actions	NgBootstrapNestedSelectActions	An array of action (links or buttons) that will be displayed within the select box
disabled	Boolean	Disable the select box

Outputs

Option	Type	Description
selected	object	Passes back selected object
actionSelect	object	Passes back the action object when one is selected

NgBootstrapNestedSelectActions [actions] Input

Option	Type	Description
id	Number	Unique ID for this action
label	String	Label that is displayed to the user

NgBootstrapNestedSelectSettings [settings] Input

Option	Type	Description	Default
field	String	The name of the field that you want to iterate over, which contains the array of options	'options'
top	Boolean	Display select options above input field	false
scroll	Boolean	Use min-height and overflow-y scroll css to limit height of select box	true
selectAll	Boolean	Allows user to select multi options	false
collapsed	Boolean	Collapse all child options and only display top most parent	false
label	String	Name of the field in the option object to display as label in drop down.	'name'
clear	String or Boolean	Set text of clear button. Setting to false will hide clear button.	'Clear'
strict	Boolean	Disabled search. Only list options.	false
filter	{fields: [...array of fields as strings]}	Fields in each option to search for when filtering.
actions	String	The style of the action options. 'link' = plain text, 'buttons' = bootstrap button	'link'
required	Boolean	Field is required. Adds "required" class.	false
indexedOptions	Boolean
numberInput	Boolean	type is "number"	false
matchRating	Float	Using the "string-similarity" package, a rating number between 0-1. See https://www.npmjs.com/package/string-similarity	0.4
emptyText	String	Text to display when no options are available
popoverTitle	String or Boolean	When disabled, select box will have a popover of option selected. This is title to that popover. false = hide popover

<!--
myOptions = [
    { 
        name: 'Parent Item', 
        options: [
            { 
                name: 'Child Item', 
                options [
                    ...
                ]
            }
        ]
    }
];
-->
<nested-select 
    [options]="myOptions" 
    [default]="myOptions[0].options[0]" 
    [settings]="{collapsed: true, strict: false}" 
    [actions]="{id: 1, label: 'Add Option'}"
    (selected)="triggerSelected($event)" 
    (actionSelected)="triggerAction($event)">

</nested-select>

License

MIT © Scot Schroeder