@ngx-dummy/select-simple
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

@Ngx-dummy/Select-simple library


npm version


GitHub license

GitHub issues GitHub forks GitHub stars GitHub Release GitHub Branches GitHub Tags GitHub Issues GitHub Forks GitHub Status publish size min size minzip size Npm downloads Npm monthly downloads Twitter Follow Donations


npm-deploy

Features

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

  • ⚙️ Completely customizable: you can change the colors, styles ...

  • ✏️ Create your own templates: create your own Options' templates

  • 👌 You can use right away: there are basic items styles included

  • 🚀 No extra deps: depends only on @angular/core / @angular/common

  • 📡 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

Using @ngx-dummy/select-simple


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>
//...
selected = undefined;
//...

More detailed showcase (the video clip demonstrates most of use cases of the library)

Using @ngx-dummy/select-simple







Versioning

supports Angular 11 - 13.

-*v9 `@ngx-dummy/select-simple` versioned `*-v9` supports Angular 9 - 11.

Browser Support

ChromeChrome FirefoxFirefox IE / EdgeEdge SafariSafari OperaOpera
last 2 versions last 2 versions Edge versions last 2 versions last 2 versions

To support my work, maybe ..👏 🍭 :

Buy Me A Coffee




Other projects:
Name URL
Accordion Simple https://www.npmjs.com/package/@ngx-dummy/accordion-simple



Usage

Licensed under GitHub license

Licensed under the MIT License - see the LICENSE file for details. _Copyright (c) belongs to Vladimir Ovsyukov <ovsyukov@yandex.com>

Package Sidebar

Install

npm i @ngx-dummy/select-simple

Weekly Downloads

1

Version

0.0.7

License

MIT

Unpacked Size

371 kB

Total Files

41

Last publish

Collaborators

  • vovansuper