ang-select

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