Nested-choice NPM

Nested Choice

Nested Choice is an angular component, for nested selections with a virtual offset, Angular Material is also built in.

picture alt

Demo Stackblitz 📌

Stackblitz

Get started 🚀

Install library

npm i nested-choice

Add the module to your application

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

import { NestedChoiceModule } from "nested-choice";

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

Basic example HTML component

<nested-choice-field
  [required]="true"
  [labelText]="'Select an option'"
  [placeholderSearch]="'Search'"
  [data]="data"
></nested-choice-field>

Template options example

<ng-template #optionTpl let-option> {{ option.label }} </ng-template>

Data example

data = [
  {
    label: "Company",
    icon: "",
    id: 1,
    children: [
      {
        label: "Process",
        icon: "",
        id: 3,
        children: [
          {
            label: "Home",
            icon: "home",
            id: 5,
          },
          {
            label: "Statistics",
            icon:
              "https://cdn4.iconfinder.com/data/icons/simplicio/128x128/piechart.png",
            id: 6,
          },
        ],
      },
      {
        label: "Human resources",
        icon:
          "https://cdn4.iconfinder.com/data/icons/top-search-7/128/_contact_book_contacts-_address_phonebook_human_list_profile_resources-256.png",
        id: 4,
      },
    ],
  },
  {
    label: "Financial",
    icon: "",
    id: 2,
  },
];

If you don't already have Angular Material installed in your project 📦

ng add @angular/material

API 🖇️

@Input list

Property	type	Description
`labelKey`	string	It allows customizing access to the label property, which can be defined by the user, the default value is *label*
`idKey`	string	It allows customizing access to the id property, which can be defined by the user, the default value is id
`iconKey`	string	It allows customizing access to the icon property, which can be defined by the user, the default value is *icon*
`visibleOptions`	number	Determine the number of elements visible on the virtual scroll, this property is required
`data`	Array	Option list
`currentOption`	object, number, string	Option selected
`optionTpl`	TemplateRef	show list in custom template
`required`	boolean	Add the asterisk to the label
`searchbox`	boolean	Hide or show input search, the default value is true
`placeholderSearch`	string	Placeholder for input search, the default value is *Search*
`textNoOptions`	string	Message to indicate that there are no options in the list, the default value is *No options*
`labelText`	string	Text for show in floating label
`width`	number, string	Width component, the default value id *200px*
`disabled`	boolean	Disable component
`hidden`	boolean	Hidden component

@Output list

Property	type	Description
`selectChange`	EventEmitter	Notify when selecting a modified or selected option for the first time, returns the object of the selected item
`opened`	EventEmitter	Notify when select list is opened
`closed`	EventEmitter	Notify when select list is closed