ng-select installed

package-lock.json

@@ -1644,6 +1644,14 @@
         }
       }
     },
+    "@ng-select/ng-select": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-4.0.1.tgz",
+      "integrity": "sha512-f5NzrKRvswOvxa8BzBgAUOpzl0B8SrlVQHQLB2zPymuZlzC2dWUi9mUhgu6s2igwdClmrZ8bysNBBNpgqHskyA==",
+      "requires": {
+        "tslib": "^1.10.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.7.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~9.1.4",
     "@angular/platform-browser-dynamic": "~9.1.4",
     "@angular/router": "~9.1.4",
+    "@ng-select/ng-select": "^4.0.1",
     "@poweredsoft/data": "0.0.26",
     "@poweredsoft/ngx-data": "0.0.13",
     "@poweredsoft/ngx-data-apollo": "0.0.8",

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

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 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';
 
 
 
@@ -9,6 +11,8 @@ import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module';
   declarations: [NgSelectDemoComponent],
   imports: [
     CommonModule,
+    NgSelectModule,
+    FormsModule,
     NgSelectDemoRoutingModule
   ]
 })

src/styles.scss

@@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~bootstrap/scss/bootstrap';
-@import '~ngx-bootstrap/datepicker/bs-datepicker.css';
+@import '~ngx-bootstrap/datepicker/bs-datepicker.css';
+@import "~@ng-select/ng-select/themes/default.theme.css";