@ngx-tiny/multi-select NPM

@ngx-tiny/multi-select

Multi Select

Angular multiple selection dropdown.

Angular 10 implementation
Works with SSR
Dynamic filtering of items
Supports Keyboard navigation (arrow, space and enter keys)
Works alone or with angular forms
No Dependencies required
String or Object Array as options
Themeable to own requirements

Installation

$ npm i @ngx-tiny/multi-select

Documentation

Full Docs:

You can find the full documentation at https://aavanzyl.github.io/ngx-tiny which includes

Installation instructions
Usage and Demos
Styling Reference
API Reference

Quick Start:

Install with npm: npm install @ngx-tiny/multi-select --save

Add NgxMultiSelectModule to your @NgModule like example below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMultiSelectModule } from '@ngx-tiny/multi-select';

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

@NgModule({
    imports: [BrowserModule, NgxMultiSelectModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Add the component to your view for basic

<ngx-multi-select 
    placeholder="Select a Country" 
    [options]="options" 
    (valueChange)="onChange($event)">
</ngx-multi-select>

or for Angular forms

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <ngx-multi-select 
        formControlName="country" 
        [options]="options" 
        placeholder="Select a Country" >
    </ngx-multi-select>
    <button class="btn" type="submit">Submit</button>
</form>

The examples above are quite basic. The picker has much more features and configurations.