add allow clear demo #18

projects/ng-select2/README.md

@@ -71,8 +71,10 @@ import { NgSelect2Module } from 'ng-select2';
 ### Inputs
 * **data** `Array<Select2OptionData>`: Data used for generating select2 - inferface definition
 * **value** `string`: Default value for select2
+* **dropdownParent** `string`: Allows you to [customize placement](https://select2.org/dropdown#dropdown-placement) of the dropdown.
 * **width** `string`: Set width for the input, default value is `resolve`
 * **disabled** `boolean`: Disable select2, default value is `false`
+* **allowClear** `boolean`:  	Provides support for [clearable selections](https://select2.org/selections#clearable-selections), default value is `false`
 * **placeholder** `string`: Placeholder for select2
 * **options** `Options`: Set options for select2, [all available options](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/4869992bc079b88280b9ff91213528904109e8ae/select2/index.d.ts#L40) for select2
 

src/app/app.component.html

@@ -16,4 +16,6 @@ <h1>ng-select2 demo's</h1>
   <app-custom-array></app-custom-array>
   <hr>
   <app-value-changed></app-value-changed>
+  <hr>
+  <app-allow-clear></app-allow-clear>
 </div>

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgSelect2Module } from 'ngSelect2';
 
 import { AppComponent } from './app.component';
+import { AllowClearComponent } from './demos/allow-clear/allow-clear.component';
 import { BasicComponent } from './demos/basic/basic.component';
 import { ChangeComponent } from './demos/change/change.component';
 import { CustomArrayComponent } from './demos/custom-array/custom-array.component';
@@ -25,7 +26,8 @@ import { DataService } from './services/data.service';
     TemplateComponent,
     MultipleComponent,
     CustomArrayComponent,
-    ValueChangedComponent
+    ValueChangedComponent,
+    AllowClearComponent
   ],
   imports: [
     BrowserModule,

src/app/demos/allow-clear/allow-clear.component.html

@@ -0,0 +1,8 @@
+<h2>9. Allow clear</h2>
+
+<ng-select2 [data]="exampleData"
+            [placeholder]="'Demo with allow clear'"
+            [width]="300"
+            [allowClear]="true"
+            [dropdownParent]="'test'"
+            [options]="options"></ng-select2>

src/app/demos/allow-clear/allow-clear.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { Select2OptionData } from 'ngSelect2';
+import { Options } from 'select2';
+
+@Component({
+  selector: 'app-allow-clear',
+  templateUrl: './allow-clear.component.html',
+  styleUrls: ['./allow-clear.component.css']
+})
+export class AllowClearComponent implements OnInit {
+  public exampleData: Array<Select2OptionData>;
+  public options: Options;
+
+  ngOnInit() {
+    this.exampleData = [
+      {
+        id: 'opt1',
+        text: 'Options 1'
+      },
+      {
+        id: 'opt2',
+        text: 'Options 2'
+      },
+      {
+        id: 'opt3',
+        text: 'Options 3'
+      },
+      {
+        id: 'opt4',
+        text: 'Options 4'
+      }
+    ];
+
+    this.options = {
+      width: '300'
+    };
+  }
+}