ng2-select

Native Angular2 component for Select

View on GitHub

Getting started

First of all, Welcome!

Select a single city

No city selected 


  

    
  






  

  

    
    
    

      
      
        

          
  1. <div style="width: 300px; margin-bottom: 20px;">
  2.   <h3>Select a single city</h3>
  3.   <ng-select [allowClear]="true"
  4.               [items]="items"
  5.               [disabled]="disabled"
  6.               (data)="refreshValue($event)"
  7.               (selected)="selected($event)"
  8.               (removed)="removed($event)"
  9.               (typed)="typed($event)"
  10.               placeholder="No city selected">
  11.   </ng-select>
  12.   <p></p>
  13.   <pre>{{value.text}}</pre>
  14.   <div>
  15.     <button type="button" class="btn btn-primary"
  16.             [(ngModel)]="disabledV" btnCheckbox
  17.             btnCheckboxTrue="1" btnCheckboxFalse="0">
  18.       {{disabled === '1' ? 'Enable' : 'Disable'}}
  19.     </button>
  20.   </div>
  21. </div>

        

      
      
        

          
  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4.   selector: 'single-demo',
  5.   templateUrl: './single-demo.html'
  6. })
  7. export class SingleDemoComponent {
  8.   public items:Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
  9.     'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
  10.     'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
  11.     'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
  12.     'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon',
  13.     'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga',
  14.     'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome',
  15.     'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart',
  16.     'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław',
  17.     'Zagreb', 'Zaragoza', 'Łódź'];
  18.  
  19.   private value:any = {};
  20.   private _disabledV:string = '0';
  21.   private disabled:boolean = false;
  22.  
  23.   private get disabledV():string {
  24.     return this._disabledV;
  25.   }
  26.  
  27.   private set disabledV(value:string) {
  28.     this._disabledV = value;
  29.     this.disabled = this._disabledV === '1';
  30.   }
  31.  
  32.   public selected(value:any):void {
  33.     console.log('Selected value is: ', value);
  34.   }
  35.  
  36.   public removed(value:any):void {
  37.     console.log('Removed value is: ', value);
  38.   }
  39.  
  40.   public typed(value:any):void {
  41.     console.log('New search input: ', value);
  42.   }
  43.  
  44.   public refreshValue(value:any):void {
  45.     this.value = value;
  46.   }
  47. }

        

      
    
    

  
  




      
      
        

  
Select multiple cities

  
  

  

    

    
        
    
    
     
     
  
      
  

  
  

  

    
  






  

  

    
    
    

      
      
        

          
  1. <div style="width: 300px; margin-bottom: 20px;">
  2.   <h3>Select multiple cities</h3>
  3.   <ng-select  [multiple]="true"
  4.               [items]="items"
  5.               [disabled]="disabled"
  6.               (data)="refreshValue($event)"
  7.               (selected)="selected($event)"
  8.               (removed)="removed($event)"
  9.               placeholder="No city selected"></ng-select>
  10.   <pre>{{itemsToString(value)}}</pre>
  11.   <div>
  12.     <button type="button" class="btn btn-primary"
  13.             [(ngModel)]="disabledV" btnCheckbox
  14.             btnCheckboxTrue="1" btnCheckboxFalse="0">
  15.       {{disabled === '1' ? 'Enable' : 'Disable'}}
  16.     </button>
  17.   </div>
  18. </div>

        

      
      
        

          
  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4.   selector: 'multiple-demo',
  5.   templateUrl: './multiple-demo.html'
  6. })
  7. export class MultipleDemoComponent {
  8.   public items:Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
  9.     'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
  10.     'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf',
  11.     'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', 'Hamburg', 'Hannover',
  12.     'Helsinki', 'Leeds', 'Leipzig', 'Lisbon', 'Łódź', 'London', 'Kraków', 'Madrid',
  13.     'Málaga', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Naples', 'Palermo',
  14.     'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 'Rotterdam', 'Seville', 'Sheffield',
  15.     'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna',
  16.     'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza'];
  17.  
  18.   private value:any = ['Athens'];
  19.   private _disabledV:string = '0';
  20.   private disabled:boolean = false;
  21.  
  22.   private get disabledV():string {
  23.     return this._disabledV;
  24.   }
  25.  
  26.   private set disabledV(value:string) {
  27.     this._disabledV = value;
  28.     this.disabled = this._disabledV === '1';
  29.   }
  30.  
  31.   public selected(value:any):void {
  32.     console.log('Selected value is: ', value);
  33.   }
  34.  
  35.   public removed(value:any):void {
  36.     console.log('Removed value is: ', value);
  37.   }
  38.  
  39.   public refreshValue(value:any):void {
  40.     this.value = value;
  41.   }
  42.  
  43.   public itemsToString(value:Array<any> = []):string {
  44.     return value
  45.       .map((item:any) => {
  46.         return item.text;
  47.       }).join(',');
  48.   }
  49. }

        

      
    
    

  
  




      
      
        

  
Select a city by country

  
  

    

    

      
        No city selected
        
        
        
        
      
    

    
     
     
  
      
  


  
  
  

  

  

    
  






  

  

    
    
    

      
      
        

          
  1. <div class="selectivity-input example-input"
  2.      style="width: 300px; margin-bottom: 20px;">
  3.   <h3>Select a city by country</h3>
  4.   <ng-select [allowClear]="true"
  5.              [items]="items"
  6.              [disabled]="disabled"
  7.              (data)="refreshValue($event)"
  8.              (selected)="selected($event)"
  9.              (removed)="removed($event)"
  10.              placeholder="No city selected"></ng-select>
  11.   <p></p>
  12.   <pre>{{value.text}}</pre>
  13.   <div>
  14.     <button type="button" class="btn btn-primary"
  15.             [(ngModel)]="disabledV" btnCheckbox
  16.             btnCheckboxTrue="1" btnCheckboxFalse="0">
  17.       {{disabled === '1' ? 'Enable' : 'Disable'}}
  18.     </button>
  19.   </div>
  20. </div>

        

      
      
        

          
  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4.   selector: 'children-demo',
  5.   templateUrl: './children-demo.html'
  6. })
  7. export class ChildrenDemoComponent {
  8.   public items:Array<any> = [
  9.     {
  10.       text: 'Austria',
  11.       children: [
  12.         {id: 54, text: 'Vienna'}
  13.       ]
  14.     },
  15.     {
  16.       text: 'Belgium',
  17.       children: [
  18.         {id: 2, text: 'Antwerp'},
  19.         {id: 9, text: 'Brussels'}
  20.       ]
  21.     },
  22.     {
  23.       text: 'Bulgaria',
  24.       children: [
  25.         {id: 48, text: 'Sofia'}
  26.       ]
  27.     },
  28.     {
  29.       text: 'Croatia',
  30.       children: [
  31.         {id: 58, text: 'Zagreb'}
  32.       ]
  33.     },
  34.     {
  35.       text: 'Czech Republic',
  36.       children: [
  37.         {id: 42, text: 'Prague'}
  38.       ]
  39.     },
  40.     {
  41.       text: 'Denmark',
  42.       children: [
  43.         {id: 13, text: 'Copenhagen'}
  44.       ]
  45.     },
  46.     {
  47.       text: 'England',
  48.       children: [
  49.         {id: 6, text: 'Birmingham'},
  50.         {id: 7, text: 'Bradford'},
  51.         {id: 26, text: 'Leeds'},
  52.         {id: 30, text: 'London'},
  53.         {id: 34, text: 'Manchester'},
  54.         {id: 47, text: 'Sheffield'}
  55.       ]
  56.     },
  57.     {
  58.       text: 'Finland',
  59.       children: [
  60.         {id: 25, text: 'Helsinki'}
  61.       ]
  62.     },
  63.     {
  64.       text: 'France',
  65.       children: [
  66.         {id: 35, text: 'Marseille'},
  67.         {id: 40, text: 'Paris'}
  68.       ]
  69.     },
  70.     {
  71.       text: 'Germany',
  72.       children: [
  73.         {id: 5, text: 'Berlin'},
  74.         {id: 8, text: 'Bremen'},
  75.         {id: 12, text: 'Cologne'},
  76.         {id: 14, text: 'Dortmund'},
  77.         {id: 15, text: 'Dresden'},
  78.         {id: 17, text: 'Düsseldorf'},
  79.         {id: 18, text: 'Essen'},
  80.         {id: 19, text: 'Frankfurt'},
  81.         {id: 23, text: 'Hamburg'},
  82.         {id: 24, text: 'Hannover'},
  83.         {id: 27, text: 'Leipzig'},
  84.         {id: 37, text: 'Munich'},
  85.         {id: 50, text: 'Stuttgart'}
  86.       ]
  87.     },
  88.     {
  89.       text: 'Greece',
  90.       children: [
  91.         {id: 3, text: 'Athens'}
  92.       ]
  93.     },
  94.     {
  95.       text: 'Hungary',
  96.       children: [
  97.         {id: 11, text: 'Budapest'}
  98.       ]
  99.     },
  100.     {
  101.       text: 'Ireland',
  102.       children: [
  103.         {id: 16, text: 'Dublin'}
  104.       ]
  105.     },
  106.     {
  107.       text: 'Italy',
  108.       children: [
  109.         {id: 20, text: 'Genoa'},
  110.         {id: 36, text: 'Milan'},
  111.         {id: 38, text: 'Naples'},
  112.         {id: 39, text: 'Palermo'},
  113.         {id: 44, text: 'Rome'},
  114.         {id: 52, text: 'Turin'}
  115.       ]
  116.     },
  117.     {
  118.       text: 'Latvia',
  119.       children: [
  120.         {id: 43, text: 'Riga'}
  121.       ]
  122.     },
  123.     {
  124.       text: 'Lithuania',
  125.       children: [
  126.         {id: 55, text: 'Vilnius'}
  127.       ]
  128.     },
  129.     {
  130.       text: 'Netherlands',
  131.       children: [
  132.         {id: 1, text: 'Amsterdam'},
  133.         {id: 45, text: 'Rotterdam'},
  134.         {id: 51, text: 'The Hague'}
  135.       ]
  136.     },
  137.     {
  138.       text: 'Poland',
  139.       children: [
  140.         {id: 29, text: 'Łódź'},
  141.         {id: 31, text: 'Kraków'},
  142.         {id: 41, text: 'Poznań'},
  143.         {id: 56, text: 'Warsaw'},
  144.         {id: 57, text: 'Wrocław'}
  145.       ]
  146.     },
  147.     {
  148.       text: 'Portugal',
  149.       children: [
  150.         {id: 28, text: 'Lisbon'}
  151.       ]
  152.     },
  153.     {
  154.       text: 'Romania',
  155.       children: [
  156.         {id: 10, text: 'Bucharest'}
  157.       ]
  158.     },
  159.     {
  160.       text: 'Scotland',
  161.       children: [
  162.         {id: 21, text: 'Glasgow'}
  163.       ]
  164.     },
  165.     {
  166.       text: 'Spain',
  167.       children: [
  168.         {id: 4, text: 'Barcelona'},
  169.         {id: 32, text: 'Madrid'},
  170.         {id: 33, text: 'Málaga'},
  171.         {id: 46, text: 'Seville'},
  172.         {id: 53, text: 'Valencia'},
  173.         {id: 59, text: 'Zaragoza'}
  174.       ]
  175.     },
  176.     {
  177.       text: 'Sweden',
  178.       children: [
  179.         {id: 22, text: 'Gothenburg'},
  180.         {id: 49, text: 'Stockholm'}
  181.       ]
  182.     }
  183.   ];
  184.   private value:any = {};
  185.   private _disabledV:string = '0';
  186.   private disabled:boolean = false;
  187.  
  188.   private get disabledV():string {
  189.     return this._disabledV;
  190.   }
  191.  
  192.   private set disabledV(value:string) {
  193.     this._disabledV = value;
  194.     this.disabled = this._disabledV === '1';
  195.   }
  196.  
  197.   public selected(value:any):void {
  198.     console.log('Selected value is: ', value);
  199.   }
  200.  
  201.   public removed(value:any):void {
  202.     console.log('Removed value is: ', value);
  203.   }
  204.  
  205.   public refreshValue(value:any):void {
  206.     this.value = value;
  207.   }
  208. }

        

      
    
    

  
  




      
      
        

  
Select a color

  
  

    

    

      
        No color selected
        
        
        
        
      
    

    
     
     
  
      
  


  
  
  

  

  

    
  






  

  

    
    
    

      
      
        

          
  1. <div style="width: 300px; margin-bottom: 20px;">
  2.   <h3>Select a color</h3>
  3.   <ng-select [allowClear]="true"
  4.               [items]="items"
  5.               [disabled]="disabled"
  6.               (data)="refreshValue($event)"
  7.               (selected)="selected($event)"
  8.               (removed)="removed($event)"
  9.               (typed)="typed($event)"
  10.               placeholder="No color selected">
  11.   </ng-select>
  12.   <p></p>
  13.   <pre>{{value.text}}</pre>
  14.   <div>
  15.     <button type="button" class="btn btn-primary"
  16.             [(ngModel)]="disabledV" btnCheckbox
  17.             btnCheckboxTrue="1" btnCheckboxFalse="0">
  18.       {{disabled === '1' ? 'Enable' : 'Disable'}}
  19.     </button>
  20.   </div>
  21. </div>

        

      
      
        

          
  1. import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  2.  
  3. const COLORS = [
  4.   {'name': 'Blue 10', 'hex': '#C0E6FF'},
  5.   {'name': 'Blue 20', 'hex': '#7CC7FF'},
  6.   {'name': 'Blue 30', 'hex': '#5AAAFA'},
  7.   {'name': 'Blue 40', 'hex': '#5596E6'},
  8.   {'name': 'Blue 50', 'hex': '#4178BE'},
  9.   {'name': 'Blue 60', 'hex': '#325C80'},
  10.   {'name': 'Blue 70', 'hex': '#264A60'},
  11.   {'name': 'Blue 80', 'hex': '#1D3649'},
  12.   {'name': 'Blue 90', 'hex': '#152935'},
  13.   {'name': 'Blue 100', 'hex': '#010205'},
  14.   {'name': 'Green 10', 'hex': '#C8F08F'},
  15.   {'name': 'Green 20', 'hex': '#B4E051'},
  16.   {'name': 'Green 30', 'hex': '#8CD211'},
  17.   {'name': 'Green 40', 'hex': '#5AA700'},
  18.   {'name': 'Green 50', 'hex': '#4B8400'},
  19.   {'name': 'Green 60', 'hex': '#2D660A'},
  20.   {'name': 'Green 70', 'hex': '#144D14'},
  21.   {'name': 'Green 80', 'hex': '#0A3C02'},
  22.   {'name': 'Green 90', 'hex': '#0C2808'},
  23.   {'name': 'Green 100', 'hex': '#010200'},
  24.   {'name': 'Red 10', 'hex': '#FFD2DD'},
  25.   {'name': 'Red 20', 'hex': '#FFA5B4'},
  26.   {'name': 'Red 30', 'hex': '#FF7D87'},
  27.   {'name': 'Red 40', 'hex': '#FF5050'},
  28.   {'name': 'Red 50', 'hex': '#E71D32'},
  29.   {'name': 'Red 60', 'hex': '#AD1625'},
  30.   {'name': 'Red 70', 'hex': '#8C101C'},
  31.   {'name': 'Red 80', 'hex': '#6E0A1E'},
  32.   {'name': 'Red 90', 'hex': '#4C0A17'},
  33.   {'name': 'Red 100', 'hex': '#040001'},
  34.   {'name': 'Yellow 10', 'hex': '#FDE876'},
  35.   {'name': 'Yellow 20', 'hex': '#FDD600'},
  36.   {'name': 'Yellow 30', 'hex': '#EFC100'},
  37.   {'name': 'Yellow 40', 'hex': '#BE9B00'},
  38.   {'name': 'Yellow 50', 'hex': '#8C7300'},
  39.   {'name': 'Yellow 60', 'hex': '#735F00'},
  40.   {'name': 'Yellow 70', 'hex': '#574A00'},
  41.   {'name': 'Yellow 80', 'hex': '#3C3200'},
  42.   {'name': 'Yellow 90', 'hex': '#281E00'},
  43.   {'name': 'Yellow 100', 'hex': '#020100'}
  44. ];
  45.  
  46. @Component({
  47.   selector: 'rich-demo',
  48.   templateUrl: './rich-demo.html',
  49.   styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`],
  50.   encapsulation: ViewEncapsulation.None  // Enable dynamic HTML styles
  51. })
  52. export class RichDemoComponent implements OnInit {
  53.   private value:any = {};
  54.   private _disabledV:string = '0';
  55.   private disabled:boolean = false;
  56.   private items:Array<any> = [];
  57.  
  58.   public ngOnInit():any {
  59.     COLORS.forEach((color:{name:string, hex:string}) => {
  60.       this.items.push({
  61.         id: color.hex,
  62.         text: `<colorbox style='background-color:${color.hex};'></colorbox>${color.name} (${color.hex})`
  63.       });
  64.     });
  65.   }
  66.  
  67.   private get disabledV():string {
  68.     return this._disabledV;
  69.   }
  70.  
  71.   private set disabledV(value:string) {
  72.     this._disabledV = value;
  73.     this.disabled = this._disabledV === '1';
  74.   }
  75.  
  76.   public selected(value:any):void {
  77.     console.log('Selected value is: ', value);
  78.   }
  79.  
  80.   public removed(value:any):void {
  81.     console.log('Removed value is: ', value);
  82.   }
  83.  
  84.   public typed(value:any):void {
  85.     console.log('New search input: ', value);
  86.   }
  87.  
  88.   public refreshValue(value:any):void {
  89.     this.value = value;
  90.   }
  91. }

        

      
    
    

  
  




      
    
    

  
  


  

    
API

    
Usage
 
import {SelectModule} from 'ng2-select';

 
Annotations
 
// class Select
@Component({
  selector: 'ng-select',
  properties: [
    'allowClear',
    'placeholder',
    'items',
    'multiple',
    'showSearchInputInDropdown']
})

 
Select properties
 
     
  • items - (Array<any>) - Array of items from which to select. Should be an array of objects with id and text properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text. Items may be nested by adding a children property to any item, whose value should be another array of items. Items that have children may omit having an ID. If items are specified, all items are expected to be available locally and all selection operations operate on this local array only. If omitted, items are not available locally, and the query option should be provided to fetch data.
    •  
  • active (?Array<any>) - Initial selection data to set. This should be an object with id and text properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value.
    •  
  • allowClear (?boolean=false) (not yet supported) - Set to true to allow the selection to be cleared. This option only applies to single-value inputs.
    •  
  • placeholder (?string='') - Placeholder text to display when the element has no focus and selected items.
    •  
  • disabled (?boolean=false) - When true, it specifies that the component should be disabled.
    •  
  • multiple - (?boolean=false) - Mode of this component. If set true user can select more than one option. This option only applies to single-value inputs, as multiple-value inputs don't have the search input in the dropdown to begin with.
    •  
 
Select events
 
     
  • data - it fires during all events of this component; returns Array<any> - current selected data
    •  
  • selected - it fires after a new option selected; returns object with id and text properties that describes a new option.
    •  
  • removed - it fires after an option removed; returns object with id and text properties that describes a removed option.
    •  
  • typed - it fires after changing of search input; returns string with that value.
    •