angular-custom-selector v0.0.6

NOTE*** This library was generated using Angular CLI version 9.0.0. Therefore, it is recommended that you use a compatible version of Angular to ensure proper functionality

Angular Custom Selector

This package offers an intuitive interface that enables users to select multiple options from a dropdown list. It includes various customization options to allow developers to tailor the selector according to their specific needs, such as customizing labels, styling, and available options. It features a search and filter functionality that enables users to quickly locate the desired value from a vast list of options. Additionally, this package supports the selection of nested options, which is useful when dealing with complex data hierarchies.

User Interfaces

Single Selector

Multiple Selector

Installation

Install angular-custom-selector with npm

  npm i angular-custom-selector

Finally, you need to import the related styles into your project's angular.json file. To do so, simply add the following path to your styles property under architect.

  'node_modules/angular-custom-selector/src/lib/assets/styles/styles.scss'

"architect": {
    "build": {
         ...,
        "styles": [
         ...,
         "node_modules/angular-custom-selector/src/lib/assets/styles/styles.scss"
        ],
    ...,
}

After completing all of these steps, if you still run into a problem, you have to make sure to check the following things as well.

1. Check whether BrowserAnimationsModule is imported to your app.

      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

2. Check whether @angular/localize is installed in your project. If it is not installed, you can install it using the following command.

          ng add @angular/localize

Usage

As an example, you can use the module import in your corresponding Module class.

app.module.ts

import { AngularCustomSelectorModule } from 'angular-custom-selector';

@NgModule({
  imports: [
    ...
    AngularCustomSelectorModule
  ]
})

export class AppModule { }

The angular-custom-selector package is a convenient wrapper that allows you to use the HTML selector component in any part of your Angular application. By importing the module and using the selector in your HTML templates, you can quickly and easily create custom selector components that can be customized to suit your needs.

app.component.html

<angular-custom-selector type="multi" labelText="Items" [data]="dataHierachy" selectedName="Select"
  (onChange)="updateState($event)" hoverText="Select Location" [enableAllNodes]="true"
  (onFetchedData)="onFetched($event)" displayName="name" [disabled]="false" searchKey="name" >
</angular-custom-selector>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  selectedName: string = 'Country_1';
  public selectorDisabled: boolean = false;

  // Need to initialize with your data hierarchy.
  public dataHierarchy: Array<any> = data;

  public updateState(dataItem:any){
    console.log(dataItem);
  }

  onFetched(data:any){
    console.log(data);
  }
}

Component API

Custom Styling

***NOTE: you have to use :host ::ng-deep with your class name for overwrite default styles. As below example,

:host ::ng-deep .k-treeview{
    font-family: 'Courier New', Courier, monospace;
}

Sample Data Hierarchy

export const data = [
  {
    id: 1,
    name: "Country_1",
    isSelectable: false,
    items: [
      {
        id: 45,
        name: "Region_1",
        isSelectable: false,
        items: [
          {
            id: 48,
            name: "Area_1",
            isSelectable: true,
            items: [],
            itemCode: "10102"
          },
          {
            id: 60,
            name: "Area_2",
            isSelectable: true,
            items: [],
            itemCode: "10103"
          }
        ],
        itemCode: "10234"
      },
      {
        id: 38,
        name: "Region_2",
        isSelectable: false,
        items: [
          {
            id: 56,
            name: "Area_1",
            isSelectable: true,
            items: [],
            itemCode: "10564"
          }
        ],
        itemCode: "10765"
      },
      {
        id: 61,
        name: "Region_3",
        isSelectable: false,
        items: [
          {
            id: 62,
            name: "Area_1",
            isSelectable: false,
            items: [
              {
                id: 63,
                name: "Semi-Area_1",
                isSelectable: true,
                items: [],
                itemCode: "10878"
              },
              {
                id: 129,
                name: "Semi-Area_2",
                isSelectable: true,
                items: [],
                itemCode: "10986"
              },
              {
                id: 125,
                name: "Semi-Area_3",
                isSelectable: true,
                items: [],
                itemCode: "10743"
              }
            ],
            itemCode: "12467",
          },
          {
            id: 76,
            name: "Area_2",
            isSelectable: true,
            items: [],
            itemCode: "12477",
          },
          {
            id: 15,
            name: "Area_3",
            isSelectable: true,
            items: [],
            itemCode: "10632"
          },
          {
            id: 21,
            name: "Area_4",
            isSelectable: true,
            items: [],
            itemCode: "13487"
          }
        ],
        itemCode: "12346"
      }
    ],
    itemCode: "12343"
  }]

Authors

• @lakshitha
• @sirojan