ang-select
TypeScript icon, indicating that this package has built-in type declarations

0.0.10 • Public • Published

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

Table of Contents

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

Package Sidebar

Install

npm i ang-select

Weekly Downloads

0

Version

0.0.10

License

none

Unpacked Size

95 kB

Total Files

18

Last publish

Collaborators

  • aniketkale