Nested Choice

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

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 |

Built with 🛠️

• Angular - Web Framework
• Angular Material - Component Library

Author ✒️

• Jeison Nisperuza - jnisperuza - jnisperuza.github.io