npm:@ngx-dummy/select-simple

README

@Ngx-dummy/Select-simple library

Features

This is an Angular "version" of html select element (which could hardly be styled / templated ... hence the library)

:gear: Completely customizable: you can change the colors, styles ...
:pencil2: Create your own templates: create your own Options' templates
:ok_hand: You can use right away: there are basic items styles included
:rocket: No extra deps: depends only on @angular/core / @angular/common
:satellite: Options' Elements object bindings data-bind Options to string of complex objects

Install

Yarn

yarn add @ngx-dummy/select-simple

With Npm

npm install -save @ngx-dummy/select-simple@0.0.5-v9

Usage

See the sample app setup Stackblitz

samples

import { SelectSimpleModule } from '@ngx-dummy/select-simple';

@NgModule({
    imports: [SelectSimpleModule],
})
export class AppModule {}

with `Options` (Array of Strings) binding:

<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [none]="true" formControlName="selector" placeholder="Select a City"></ngxd-select>

//... options as simple strings
options = ['opt1', 'opt2', 'opt2'];
//...

with `Options` (Array of Strings) binding:

<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [none]="true" formControlName="selector" placeholder="Select a City" optionLabelKey="name"></ngxd-select>

//... Select-items's Captions resolved by `optionLabelKey` param
options = [{ name: 'opt1' , value: { param1: 'para1', param2: 'para2' } }, ...];
//...

with `Options` (Array of Strings) binding:

<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [none]="true" formControlName="selector" placeholder="Select a City" optionLabelKey="name"></ngxd-select>

//... Select-items's Captions resolved by `optionLabelKey` param
options = [{ name: 'opt1' , value: { param1: 'para1', param2: 'para2' } }, ...];
//...

and `Option` are declared directly:

<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [none]="true" formControlName="selector" placeholder="Select a City" optionLabelKey="name">
    <ngxd-select-item [label]="'Option 1'" [option]="'Opt1'" (onClick)="selected = $event"></ngxd-select-item>
</ngxd-select>