@ngx-dummy/select-simple NPM

Features

This is an "Angular version" of html select (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

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" [resetBtn]="true" formControlName="selector" placeholder="Select a City"></ngxd-select>

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

with `Options` (Array of Objects) and `optionLabelKey` (for resolving every options' caption) binding:

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

//... Select-items's Captions resolved by `optionLabelKey` param (could be simple name of property key or, in case of nested property, dot-separated, ie, `value.para1` )
options = [{ name: 'opt1' , value: { param1: 'para1', param2: 'para2' } }, { name: 'opt2' , value: { param1: 'para1', param2: 'para2' } },];
//...

and `Option` are projected (content projection \ transclusion):

<ngxd-select id="select1" [options]="options" [readonly]="false" [required]="true" [resetBtn]="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-item [label]="'Option 2'" [option]="'Opt2'" (onClick)="selected = $event"></ngxd-select-item>
</ngxd-select>