add custom array collection #11

Author: Stijn Goethals

src/app/app.component.css

@@ -0,0 +1,3 @@
+div {
+  margin-bottom: 10px;
+}

src/app/app.component.html

@@ -12,4 +12,6 @@ <h1>ng-select2 demo's</h1>
   <app-dynamic></app-dynamic>
   <hr>
   <app-multiple></app-multiple>
-</div>
+  <hr>
+  <app-custom-array></app-custom-array>
+</div>

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { MultipleComponent } from './demos/multiple/multiple.component';
 import { TemplateComponent } from './demos/template/template.component';
 import { DataService } from './services/data.service';
 import { FormsModule } from '@angular/forms';
+import { CustomArrayComponent } from './demos/custom-array/custom-array.component';
 
 
 @NgModule({
@@ -21,7 +22,8 @@ import { FormsModule } from '@angular/forms';
     ChangeComponent,
     DynamicComponent,
     TemplateComponent,
-    MultipleComponent
+    MultipleComponent,
+    CustomArrayComponent
   ],
   imports: [
     BrowserModule,

src/app/demos/custom-array/custom-array.component.css

@@ -0,0 +1,5 @@
+<h2>7. Custom array</h2>
+<ng-select2 [data]="exampleData"
+            [width]="300"
+            [options]="options">
+</ng-select2>

src/app/demos/custom-array/custom-array.component.html

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { Options } from 'select2';
+
+@Component({
+  selector: 'app-custom-array',
+  templateUrl: './custom-array.component.html',
+  styleUrls: ['./custom-array.component.css']
+})
+export class CustomArrayComponent implements OnInit {
+  public exampleData: any[];
+  public options: Options;
+
+  ngOnInit() {
+    this.exampleData = [
+      {
+        id: 'basic1',
+        custom: { en: 'Label 1' }
+      },
+      {
+        id: 'basic2',
+        disabled: true,
+        custom: { en: 'Label 2' }
+      },
+      {
+        id: 'basic3',
+        custom: { en: 'Label 3' }
+      },
+      {
+        id: 'basic4',
+        custom: { en: 'Label 4' }
+      }
+    ];
+
+    this.options = {
+      multiple: true,
+      theme: 'classic',
+      closeOnSelect: false,
+      width: '300',
+      templateSelection: (object: any) => {
+        return object && object.custom && object.custom.en;
+      },
+      templateResult: (object: any) => {
+        return object && object.custom && object.custom.en;
+      }
+    };
+  }
+}