Merge pull request #216 from ngx-lib/viewchild-fix

Fix for Angular 9+ version

Author: pankajparkar

README.md

@@ -2,8 +2,9 @@
 
 # Multiselect
 
-This project focuses on serving an intuitive select control. This look and feel of the component has been inspired by AngularJS [isteven-multiselect](http://isteven.github.io/angular-multi-select) directive, but from coding perspective, this may not be architectured in the similar way. 
+This project focuses on serving an intuitive select control. This look and feel of the component has been inspired by AngularJS [isteven-multiselect](http://isteven.github.io/angular-multi-select) directive, but from coding perspective, this may not be architectured in the similar way.
 It supports ultimate features like
+
 - 🖱️Virtual scroll
 - 📃Forms
 - 🎨Theming (bootstrap/material)
@@ -27,6 +28,7 @@ It's super easy to get started with Angular multiselect dropdown. Only three ste
     </code-example>
 
 2.  Import module `NgxMultiselectModule` into your `app.module.ts`
+
     ```js
     import { NgxMultiselectModule } from '@ngx-lib/multiselect';
 
@@ -44,15 +46,10 @@ It's super easy to get started with Angular multiselect dropdown. Only three ste
     }
     ```
 
-
-3.  Use `ngx-multiselect` on HTML
+3)  Use `ngx-multiselect` on HTML
 
     ```html
-    <ngx-multiselect
-        [(ngModel)]="selectedCountry"
-        [options]="countries"
-        ngDefaultControl>
-    </ngx-multiselect>
+    <ngx-multiselect [(ngModel)]="selectedCountry" [options]="countries" ngDefaultControl> </ngx-multiselect>
     ```
 
     ```js
@@ -79,34 +76,53 @@ It's super easy to get started with Angular multiselect dropdown. Only three ste
     }
     ```
 
-## [**Stackblitz Demo**](https://stackblitz.com/edit/ngx-multilselect)
+## Version Support
+
+| Angular Version | Supported version            |
+| --------------- | ---------------------------- |
+| Angular 6 - 8   | @ngx-lib/multiselect - 1.x.x |
+| Angular 9+      | @ngx-lib/multiselect - 2.x.x |
+
+## Playground
+
+### Angular 6 - https://stackblitz.com/edit/angular-mo178b
 
+### Angular 7 - https://stackblitz.com/edit/angular7-playground-duyksm
+
+### Angular 8 - https://stackblitz.com/edit/ngx-multilselect
+
+### Angular 9 - https://stackblitz.com/edit/angular-qfis38
+
+### Angular 12 - https://stackblitz.com/edit/base-angular-12-app-cyixan
+
+### Angular 13 - https://stackblitz.com/edit/angular-3qzfyc
+
+### Angular 14 - https://stackblitz.com/edit/angular-rhm55j
 
 # Developer tasks
 
 We use `npm` to manage the dependencies and to run build tasks.
 You should run all these tasks from the `multiselect/docs_app` folder.
 Here are the most important tasks you might need to use:
 
-* `npm install` - install all the dependencies.
-* `npm run setup` - install all the dependencies and run dgeni on the docs.
-
-* `npm run build` - create a production build of the application (after installing dependencies, etc).
+- `npm install` - install all the dependencies.
+- `npm run setup` - install all the dependencies and run dgeni on the docs.
 
-* `npm start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
-* `npm run serve-and-sync` - run both the `docs-watch` and `start` in the same console.
-* `npm run lint` - check that the doc-viewer code follows our style rules.
-* `npm test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
-* `npm test -- --watch=false` - run all the unit tests once.
-* `npm run e2e` - run all the e2e tests for the doc-viewer.
+- `npm run build` - create a production build of the application (after installing dependencies, etc).
 
-* `npm run docs` - generate all the docs from the source files.
-* `npm run docs-watch` - watch the multiselect source and the docs files and run a short-circuited doc-gen for the docs that changed (don't work properly at the moment).
-* `npm run docs-lint` - check that the doc gen code follows our style rules.
-* `npm run docs-test` - run the unit tests for the doc generation code.
+- `npm start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
+- `npm run serve-and-sync` - run both the `docs-watch` and `start` in the same console.
+- `npm run lint` - check that the doc-viewer code follows our style rules.
+- `npm test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
+- `npm test -- --watch=false` - run all the unit tests once.
+- `npm run e2e` - run all the e2e tests for the doc-viewer.
 
-* `npm run build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
+- `npm run docs` - generate all the docs from the source files.
+- `npm run docs-watch` - watch the multiselect source and the docs files and run a short-circuited doc-gen for the docs that changed (don't work properly at the moment).
+- `npm run docs-lint` - check that the doc gen code follows our style rules.
+- `npm run docs-test` - run the unit tests for the doc generation code.
 
+- `npm run build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 
 # Running unit tests
 
@@ -119,4 +135,4 @@ Here are the most important tasks you might need to use:
 1. `ng test --project='multiselect' --code-coverage`
 2. `npx http-server -c-1 -o -p 9875 ./coverage`
 
-![alt text](https://raw.githubusercontent.com/ngx-lib/multiselect/master/code-coverage.png)
+![alt text](https://raw.githubusercontent.com/ngx-lib/multiselect/master/code-coverage.png)

angular.json

@@ -13,19 +13,14 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "preserveSymlinks": true,
             "outputPath": "dist/ngx-multiselect",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -72,27 +67,16 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-              "src/styles.css"
-            ],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -117,9 +101,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -153,13 +135,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "projects/multiselect/tsconfig.lib.json",
-              "projects/multiselect/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["projects/multiselect/tsconfig.lib.json", "projects/multiselect/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -169,4 +146,4 @@
   "cli": {
     "analytics": "f38b24e8-f689-4fde-96cc-2821b4dea14a"
   }
-}
+}

docs_app/angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "preserveSymlinks": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -35,9 +36,7 @@
                 "output": "/assets/js"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -149,9 +148,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "assets": [
               "src/img",
               "src/assets",
@@ -175,10 +172,7 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
             "exclude": []
           }
         }
@@ -199,9 +193,7 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "tests/e2e/tsconfig.e2e.json"
-            ],
+            "tsConfig": ["tests/e2e/tsconfig.e2e.json"],
             "exclude": []
           }
         }

docs_app/content/examples/custom-template/src/main.ts

@@ -2,8 +2,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from '../../../../../src/app/app.module';
+import { environment } from '../../../../../src/environments/environment';
 
 if (environment.production) {
   enableProdMode();

docs_app/content/examples/enable-disable/src/app/enable-disable.component.ts

@@ -11,7 +11,7 @@ export class EnableDisableComponent implements OnInit {
   selectedOptions;
   form: FormGroup;
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit(): void {
     this.options = [{
@@ -52,23 +52,23 @@ export class EnableDisableComponent implements OnInit {
     this.form.controls['selectedOptions'].disable();
   }
 
-  disableFirstOption(){
+  disableFirstOption() {
     let options = [...this.options]
     // disabled first element
     options[0].disabled = true;
     this.options = options;
   }
 
-  disableWholeGroup(){
+  disableWholeGroup() {
     this.options = this.options.map((player) => {
-      if(player.team === 'Manchester United') {
+      if (player.team === 'Manchester United') {
         player.disabled = true;
       }
       return player;
     });
   }
 
-  enableWholeDropdown () {
+  enableWholeDropdown() {
     this.options = this.options.map((player) => ({ ...player, disabled: false }));
     this.form.controls['selectedOptions'].enable();
   }

docs_app/content/examples/enable-disable/src/main.ts

@@ -2,8 +2,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './../../../../src/app/app.module';
+import { environment } from './../../../../src/environments/environment';
 
 if (environment.production) {
   enableProdMode();

docs_app/content/examples/events/src/app/events.component.ts

@@ -8,7 +8,7 @@ export class EventsDemoComponent implements OnInit {
   options;
   message: string;
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit(): void {
     // Retrieving data for dropdown

docs_app/content/examples/events/src/main.ts

@@ -2,8 +2,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './../../../../src/app/app.module';
+import { environment } from './../../../../src/environments/environment';
 
 if (environment.production) {
   enableProdMode();

docs_app/content/examples/grouping/src/main.ts

@@ -2,8 +2,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './../../../../src/app/app.module';
+import { environment } from './../../../../src/environments/environment';
 
 if (environment.production) {
   enableProdMode();

docs_app/content/examples/model-driven/src/app/model-driven.component.ts

@@ -10,14 +10,14 @@ export class ModelDrivenComponent implements OnInit {
   options;
   selectedOptions;
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit(): void {
     this.options = [
       { "id": 1, "name": "Manchester United" },
       { "id": 2, "name": "Liverpool F.C." },
       { "id": 3, "name": "Chelsea F.C." },
-      { "id": 4, "name": "Arsenal F.C." }, 
+      { "id": 4, "name": "Arsenal F.C." },
       { "id": 5, "name": "FC Barcelona" }
     ];
     this.selectedOptions = new FormControl([

docs_app/content/examples/model-driven/src/main.ts

@@ -2,8 +2,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './../../../../src/app/app.module';
+import { environment } from './../../../../src/environments/environment';
 
 if (environment.production) {
   enableProdMode();

docs_app/content/examples/observable/src/app/observable-async.component.ts

@@ -11,7 +11,7 @@ export class ObservableAsyncComponent implements OnInit {
   observableOptions;
   selectedOptions;
 
-  constructor() {}
+  constructor() { }
 
   ngOnInit(): void {
     this.selectedOptions = new FormControl([
@@ -21,7 +21,7 @@ export class ObservableAsyncComponent implements OnInit {
 
     this.observableOptions = new Observable((observer) => {
       observer.next([
-        { "id": 1, "name": "Manchester United" }, 
+        { "id": 1, "name": "Manchester United" },
         { "id": 2, "name": "Liverpool F.C." },
         { "id": 3, "name": "Chelsea F.C." },
         { "id": 4, "name": "Arsenal F.C." },