Implemented a basic ability to auto create without multiple mode

projects/ng-select2-component/src/lib/select2-interfaces.ts

@@ -48,6 +48,15 @@ export interface Select2UpdateEvent<U extends Select2UpdateValue = Select2Value>
     readonly options: Select2Option[];
 }
 
+export interface Select2AutoCreateEvent<U extends Select2UpdateValue = Select2Value> {
+    /** component */
+    readonly component: Select2;
+    /** current selected value */
+    readonly value: U;
+    /** selected option */
+    readonly options: Select2Option[];
+}
+
 export interface Select2SearchEvent<U extends Select2UpdateValue = Select2Value> {
     /** component */
     readonly component: Select2;

projects/ng-select2-component/src/lib/select2.component.html

@@ -149,7 +149,7 @@
                     #searchInput
                     [id]="id + '-search-field'"
                     [value]="searchText"
-                    (keydown)="keyDown($event)"
+                    (keydown)="keyDown($event, autoCreate)"
                     (keyup)="searchUpdate($event)"
                     (change)="prevChange($event)"
                     class="select2-search__field"

projects/ng-select2-component/src/lib/select2.component.ts

@@ -31,6 +31,7 @@ import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@an
 import { Subject } from 'rxjs';
 
 import {
+    Select2AutoCreateEvent,
     Select2Data,
     Select2Group,
     Select2Option,
@@ -101,7 +102,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     /** infinite scroll activated */
     @Input({ transform: booleanAttribute }) infiniteScroll = false;
 
-    /** auto create if not existe */
+    /** auto create if not exist */
     @Input({ transform: booleanAttribute }) autoCreate = false;
 
     /** no template for label selection */
@@ -110,7 +111,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     /** use it for change the pattern of the filter search */
     @Input() editPattern: (str: string) => string;
 
-    /** template for formating */
+    /** template for formatting */
     @Input() templates: TemplateRef<any> | { [key: string]: TemplateRef<any> };
 
     /** the max height of the results container when opening the select */
@@ -188,6 +189,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
     @Input() resetSelectedValue: any;
 
     @Output() update = new EventEmitter<Select2UpdateEvent<Select2UpdateValue>>();
+    @Output() autoCreateItem = new EventEmitter<Select2AutoCreateEvent<Select2UpdateValue>>();
     @Output() open = new EventEmitter<Select2>();
     @Output() close = new EventEmitter<Select2>();
     @Output() focus = new EventEmitter<Select2>();
@@ -836,6 +838,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
             const item = this.addItem(value.trim());
             this.click(item);
             (e.target as HTMLInputElement).value = '';
+            this.autoCreateItem.emit({
+                value: item,
+                component: this,
+                options: Array.isArray(this.option) ? this.option : this.option ? [this.option] : null
+            });
         }
         this.stopEvent(e);
     }

src/app/app-examples.component.html

@@ -1,7 +1,7 @@
 <h2>Examples</h2>
 
 <label for="disabled">overlay : </label>
-<input type="checkbox" [(ngModel)]="overlay" />
+<input id="disabled" type="checkbox" [(ngModel)]="overlay" />
 
 <div class="block">
     <h3 id="ex-1">1. options in group ({{ value1 }})</h3>
@@ -376,4 +376,17 @@ <h3 id="ex-31">31. change list ({{ value31 }})</h3>
         id="selec2-31b"
         (update)="update('value31b', $event)"
     ></select2>
+
+    <h3 id="ex-32">32. auto create when ({{ value30 }})</h3>
+    <select2
+            [overlay]="overlay"
+            [data]="data30"
+            [value]="value30"
+            resettable
+            [autoCreate]="true"
+            [resetSelectedValue]="'CA'"
+            id="selec2-32"
+            (autoCreateItem)="update('value32', $event)"
+    >
+    </select2>
 </div>

src/app/app.component.html

@@ -2,7 +2,7 @@
 
 <nav>
     <ul>
-        <li><a routerLink="/examples" routerLinkActive="active">Exemples</a></li>
+        <li><a routerLink="/examples" routerLinkActive="active">Examples</a></li>
 
         <li><a routerLink="/generator" routerLinkActive="active">Code generator</a></li>
     </ul>