npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

matias2588-context-menu

v1.0.4

Published

[![npm version](https://badge.fury.io/js/angular2-select.svg)](https://badge.fury.io/js/angular2-select) [![Build Status](https://travis-ci.org/basvandenberg/angular2-select.svg?branch=master)](https://travis-ci.org/basvandenberg/angular2-select)

Downloads

10

Readme

Angular 2 select component

npm version Build Status

A native select component for angular 2, based on the select2 JQuery plugin.

See the angular2-select page for example uses or try it with this plunker.

The beta version is here! With new features and bug fixes. See the changelog for more details.

Disclaimer: The beta version is a complete rewrite of the alpha version, so new bugs are to be expected. Please do not yet rely on this beta version for production releases.

Getting started

Install

For npm users:

npm install --save angular2-select

For yarn users:

yarn add angular2-select

Configuration

Angular cli

After installation, no additional configuration is needed. Import the SelectModule and define it as one of the imports of your application module:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {SelectModule} from 'angular2-select';

import {AppComponent} from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
        SelectModule
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

Systemjs

Not yet tested for the beta version.

In systemjs.config.js add angular2-select to map and package:

var map = {
	'angular2-select': 'node_modules/angular2-select'
};

var packages = {
	'angular2-select': {
		main: 'index.js',
		defaultExtension: 'js'
	}
};

Input properties

| Name | Type | Default | Description | | ------------------ | ----------------- | --------------------- | ------------------------------------------------------------------------------------------ | | options | Array<option>* | | List of select option. | | allowClear | boolean | false | Only applies to single select. If set to true, a clickable clear selection cross is shown. | | disabled | boolean | false | If set to true, the select component is disabled. | | highlightColor | string | #2196f3 | Background color of highlighted option. | | highlightTextColor | string | #fff | Text color of highlighted option. | | multiple | boolean | false | If set to true, the select component is multi-select, otherwise single select. | | noFilter | number | 0 | Filter is hidden if the number of options is less than the given number. | | notFoundMsg | string | "No results found" | The message shown if no options are found for the current filter input value. | | placeholder | string | "" | Placeholder text that is shown if no options are selected.

* option is an object with value and label ({value: string, label: string})

Output events

| Name | Value | Description | | ------------- | -------------------------- | ------------------------------------------------------------------------ | | opened | null | If the select drop down is opened. | | closed | null | If the select drop down is closed. | | selected | option* | If an options is selected, returning the selected option. | | deselected | option* or [option]* | If one or more options are deselected, returning the selected option(s). | | noOptionsFound| null | When the filter result changes to 'no results found'. |

* option is an object with value and label ({value: string, label: string})

Methods

| Name | Parameters | Description | | ------------- | --------------------- | --------------------------------------- | | open | - | Open the select drop down. | | close | - | Close the select drop down. | | clear | - | Deselect all selected options. | | select | value: string | Select the option with the given value. |

Limitations

Scalability

For now, this component is not suitable for large numbers of options. If the dropdown is opened, all options are added to the DOM, which will cause browser performance issues for large numbers of options. Therefore, if you have more that a few hundred options, then you will be better of with another solution.

Drop down positioning

TODO

Develop

Global installations of gulp and yarn are required for development. Clone or fork the repository and run:

yarn install
gulp build