Description

This package is built with Tailwind CSS. Please make sure you install tailwind css in your application.

For Demo purpose you can play with CDN links. Create new application by running ng new <application-name>. Once done, Add this in your index.html file in head section.

<script src="https://cdn.tailwindcss.com"></script>

Add below in your html file

<button
  type="button"
  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
  Button text
</button>

Tailwind css should get apply to above button, now go ahead and install ang-select

Demo

• WIP

Features

• 🌠 Built with Angular v13.1.0

Table of Contents

• ang-select 📷
  • Demo
  • Features
  • Table of Contents
    • Installation
    • Usage
    • Example
    • API
      • Props
      • Events
  • Contributing
  • Author

Installation

npm i ang-select

Usage

import AngSelectModule in your Module

import { AngSelectModule } from 'ang-select';

@NgModule({
  ...
  imports: [
    ...
    AngSelectModule,
  ],
  ...
})
export class YourModule {}

Example

<div>
  <ang-select
    [options]="dropdownData"
    [selectedOption]="selectedItem"
    (onChangeOfSelect)="onSelectOfOption($event)"
  >
  </ang-select>
</div>

export class YourComponent {
  selectedItem = "Clothing";
  dropdownData = [
    "Grocery",
    "Bakery",
    "Makeup",
    "Bags",
    "Clothing",
    "Furniture",
    "Daily Needs",
  ];

  onSelectOfOption(option: any) {
    console.log("selected option: ", option);
  }
}

API

Example of config

<div>
  <ang-select [config]="dropdownConfig"> </ang-select>
</div>

export class YourComponent {
  dropdownConfig = {
    propertyConfig: {
      itemOnly: true,
      bindValue: "",
      bindLabel: "",
    },
    escapeClose: true,
    closeOnClickOutside: true,
    theme: "green", // WIP
    classes: {
      selectedOption: "text-emerald-600",
      option: "hover:bg-emerald-500 hover:text-white",
      selectedOptionInDropdown: "bg-emerald-500",
      backDrop: "bg-black opacity-50",
    },
  };
}

Props

| Name | Type | Required | Default | Description | | ----------------------------------------- | ------------------------------------------------------ | -------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | | isOpen | boolean | No | '' | Open dropdown based on this flag | | selectedOption | string | Yes | '' | Pass selected option to ang-select | | options | Array | Yes | [] | The options for dropdown in the format of Array<any> | | config.propertyConfig.itemOnly | boolean | No | true | make it false if options are not only Array<string> and configure below bindValue and bindLabel | | config.propertyConfig.bindValue | string | No | - | Object property to use for selected model. | | config.propertyConfig.bindLabel | string | No | - | Object property to use for label. | | config.escapeClose | boolean | No | true | Allow to close dropdown on Escape. Default true | | config.closeOnClickOutside | boolean | No | true | Allow to close dropdown on click outside. Default true | | config.theme | string | No | green | WIP | | config.classes.selectedOption | string | No | '' | Classes for selected option. Ex. text-emerald-600. Works only if selectedTemplate is not used | | config.classes.option | string | No | '' | Classes for options in the dropdown. Ex. hover:bg-emerald-500 hover:text-white | | config.classes.selectedOptionInDropdown | string | No | '' | Classes for selected option in the dropdown. Ex. bg-emerald-500. Works only if optionsTemplate is not used | | config.classes.backDrop | string | No | bg-transparent | Backdrop classes Ex: bg-black opacity-50 | | selectedTemplate | TemplateRef | No | - | Used to pass custom template for selected option see more details below | | optionsTemplate | TemplateRef | No | - | Used to pass custom template for options list see more details below |

selectedTemplate

[selectedTemplate]="selectedTemplate" used to modify selected option. Ex. add icon before or after text OR update design by adding classes/style

<ang-select [selectedTemplate]="selectedTemplate">
  <ng-template #selectedTemplate let-selectedOption>
    <!-- Add icon html before selected option name -->
    <span class="whitespace-nowrap">{{selectedOption}}</span>
    <!-- Add icon html after selected option name -->
  </ng-template>
</ang-select>

optionsTemplate

[optionsTemplate]="optionsTemplate" used to modify options list. Ex. add icon before or after text OR update design by adding classes/style

<ang-select [optionsTemplate]="optionsTemplate">
  <ng-template #optionsTemplate let-options>
    <div
      *ngFor="let option of options"
      class="block px-4 py-2 cursor-pointer text-gray-800 hover:bg-indigo-500 hover:text-white"
    >
      {{ option }}
    </div>
  </ng-template>
</ang-select>

Events

| Name | Returns | Description | | ------------------ | ------- | ------------------------------------------------------------------------- | | onChangeOfSelect | string | fires on selection of option, see more details below |

onChangeOfSelect

(onChangeOfSelect)="onSelectOfOption($event)" Fires on change of dropdown option

<ang-select (onChangeOfSelect)="onChange($event)"> </ang-select>

onChange(selectedOption) {
  console.log('selected option is ', selectedOption)
}

Contributing

1. Fork it ( https://github.com/aniket-kale/ang-select/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -m 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using Github Flow

Author

ang-select © Aniket