temp commit the ng-select before removing

src/app/ng-select-demo/ng-select-demo.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component';
 import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui';
 
 
@@ -14,6 +14,7 @@ import { PsSelectorsModule } from '@poweredsoft/ngx-cdk-ui';
     CommonModule,
     NgSelectModule,
     FormsModule,
+    ReactiveFormsModule,
     NgSelectDemoRoutingModule,
     PsSelectorsModule  //our ng select module
   ]

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html

@@ -1,6 +1,37 @@
 <h2>Single Select Demo</h2>
-<ps-ng-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-select>
+<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [serverFiltering]="true">
+    <div *psSelectOptionTemplate="let item">
+        {{ item.name }} - {{ item.address }}
+    </div>
+</ps-ng-select>
 
 
 <h2>Multi-Select Demo</h2>
-<ps-ng-multi-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-multi-select>
+<ps-ng-multi-select [dataSource]="merchantDataSource" [searchPath]="'name'" [sortingPath]="'name'" [disableServer]="false" [bindLabel]="'name'"></ps-ng-multi-select>
+
+
+<!-- <form>
+    <ps-ng-select [dataSource]="merchantDataSource" searchPath="name" sortingPath="name" formControlName="name" [disableServer]="false" bindLabel="name">
+        <ng-template *psSelectOptionTemplate="let item" ng-label-tmp >
+            <span>Name: </span> {{item.name}} | <span>Adress: </span>{{item.address}} | <span>Date: </span>{{item.openDate}}
+        </ng-template>
+    </ps-ng-select>
+</form> -->
+<form #form [formGroup]="myForm">
+    <ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" formControlName="merchantId">
+        <div *psSelectOptionTemplate="let item">
+            {{ item.name }} - {{ item.address }}
+        </div>
+    </ps-ng-select>
+</form>
+
+{{ myForm.value | json }}
+
+
+<ps-ng-select [dataSource]="merchantDataSource" bindLabel="name" bindValue="id" [(ngModel)]="myValue">
+    <div *psSelectOptionTemplate="let item">
+        {{ item.name }} - {{ item.address }}
+    </div>
+</ps-ng-select>
+
+{{ myValue | json }}

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts

@@ -5,6 +5,7 @@ import { IMerchant } from 'src/app/data/services/IMerchant';
 import { Observable, Subject } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'ps-ng-select-demo',
@@ -15,10 +16,16 @@ export class NgSelectDemoComponent implements OnInit {
 
   merchantDataSource: IDataSource<IMerchant>;  
   
+  selectedValue: IMerchant;
+  myForm: FormGroup;
+  myValue: string;
 
-  constructor(private merchantService: MerchantService,
+  constructor(private merchantService: MerchantService, private fb: FormBuilder
               ) {
     this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource
+    this.myForm = fb.group({
+      'merchantId': [null, null]
+    })
   }
 
   ngOnInit(): void {