hl-select v0.0.6

This library was generated with Angular CLI version 12.1.0.

This Library is best used with bootstrap 5 floating form control. its custom select themed for bootstrap floating control.

Import the HlSelectModule into your app module or whatever lazy loading module you want to

For Example -> app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HlSelectModule } from 'hl-select';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HlSelectModule,
    CommonModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once you import the module you can use it something like below

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    selectedHeroNumber : number = 0;

  options : any = [
    {
      name : "Iron Man",
      value : "0"
    },
    {
      name : "Winter Soldier",
      value : "1"
    },
    {
      name : "Captain America",
      value : "2"
    },
    {
      name : "Spider Man",
      value : "3"
    },
    {
      name : "Ant Man",
      value : "4"
    }
  ];

}

app.component.html

 <hl-select [label]="'Select a hero'" [options]="options" [(ngModel)]="selectedHeroNumber"></hl-select>

 <h1>Your hero id is : {{selectedHeroNumber}}</h1>

There are three modes for options in this select picker

object - required a array which will contain multple objects having keys name and value this is helpful when your name and values are differenct array - required a array this will not contain any object just plain values its helpful when you want to use same name as values range - required a object containing two keys "from" and "to" containing number ranges for example you want to select a number between 1990 and 2021 you can supply a object in options with "from" = 1996 and "to" = 2021 and it will automitaclly create a range of options

  <div class="row mt-5">
        <div class="col-lg-4 mt-5">
            <hl-select [options]="options" [optionsType]="'object'" [label]="'Hero ID'" [(ngModel)]="heroID"></hl-select>
        </div>
        <div class="col-lg-4 mt-5">
            <hl-select [options]="['Iron Man','Super Man','Batman']" [optionsType]="'array'" [label]="'Hero Name'" [(ngModel)]="heroName"></hl-select>
        </div>
        <div class="col-lg-4 mt-5">
            <hl-select [options]="{from : 1990,to : 2021}" [optionsType]="'range'" [label]="'Hero Year'" [(ngModel)]="heroYear"></hl-select>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-lg-4">
            <h3>Selected Hero ID</h3>
            <p>{{heroID}}</p>
        </div>
        <div class="col-lg-4">
            <h3>Selected Hero Name</h3>
            <p>{{heroName}}</p>
        </div>
        <div class="col-lg-4">
            <h3>Selected Hero Year</h3>
            <p>{{heroYear}}</p>
        </div>
    </div>

Module also comes with search option though which you can search the options and dynamically load values from server using onSearch callback

<hl-select [options]="options"  [label]="'Hero Search'" [(ngModel)]="heroID" [search]="true" (onSearch)="yourSearchCallbackFunction($event)"></hl-select>

$event will provide the keyword user is searching you can search the data from server and then change the options accordingly. make sure you enable search by using search="true"