ang-select v0.0.10

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

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

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