ng8-upgrade

README.md

@@ -46,6 +46,7 @@ export class AppModule {}
 
 ```ts
 import { Component, OnInit } from '@angular/core';
+import { IDropdownSettings } from 'ng-multiselect-dropdown';
 
 export class AppComponent implements OnInit {
   dropdownList = [];
@@ -63,7 +64,7 @@ export class AppComponent implements OnInit {
       { item_id: 3, item_text: 'Pune' },
       { item_id: 4, item_text: 'Navsari' }
     ];
-    this.dropdownSettings = {
+    this.dropdownSettings:IDropdownSettings = {
       singleSelection: false,
       idField: 'item_id',
       textField: 'item_text',

jest.config.js

@@ -1,23 +1,23 @@
-// @TODO: try to add ts-check
 const jestConfig = {
-  preset: 'jest-preset-angular',
-  setupTestFrameworkScriptFile: '<rootDir>/src/setup-jest.ts',
-  testMatch: [
-    '<rootDir>/src/**/__tests__/**/*.+(ts|js)?(x)',
-    '<rootDir>/src/**/+(*.)+(spec|test).+(ts|js)?(x)',
+  "preset": "jest-preset-angular",
+  "setupFilesAfterEnv": [
+    "<rootDir>/src/setup-jest.ts"
   ],
-  //  // moduleNameMapper: {
-  // //     'app/(.*)': '<rootDir>/src/app/$1',
-  // //     'assets/(.*)': '<rootDir>/src/assets/$1',
-  // //     'environments/(.*)': '<rootDir>/src/environments/$1',
-  // //   },
-  // //   transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
-  coveragePathIgnorePatterns: [
-    '<rootDir>/node_modules/',
-    '<rootDir>/out-tsc/',
-    '<rootDir>/src/.*(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
-    'src/(setup-jest|jest-global-mocks).ts',
+  "testPathIgnorePatterns": [
+    "<rootDir>/node_modules/",
+    "<rootDir>/dist/",
+    "<rootDir>/dist-lib/",
+    "<rootDir>/src/test.ts"
   ],
-};
+  "globals": {
+    "ts-jest": {
+      "tsConfig": "<rootDir>/src/tsconfig.spec.json",
+      "stringifyContentPathRegex": "\\.html$",
+      "astTransformers": [
+        "<rootDir>/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer"
+      ]
+    }
+  }
+}
 
 module.exports = jestConfig;

ng-package.json

@@ -1,7 +1,5 @@
 {
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
   "dest": "dist-lib",
-  "workingDirectory": ".ng_build",
   "lib": {
     "entryFile": "src/ng-multiselect-dropdown/src/public_api.ts"
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-multiselect-dropdown",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "description": "Angular Multi-Select Dropdown",
   "author": "Nilesh Patel",
@@ -25,14 +25,14 @@
     "deployOnly": "angular-cli-ghpages --no-silent --repo=https://github.com/NileshPatel17/ng-multiselect-dropdown.git --name=\"Nilesh Patel\" [email protected]"
   },
   "keywords": [
-    "angular2",
     "angular4",
+    "angular8",
     "angular multiselect dropdown",
-    "angular2 multiselect dropdown",
     "angular4 multiselect dropdown",
+    "angular8 multiselect dropdown",
     "ng multiselect dropdown",
-    "ng2 multiselect dropdown",
-    "ng4 multiselect dropdown"
+    "ng4 multiselect dropdown",
+    "ng8 multiselect dropdown"
   ],
   "repository": {
     "type": "git",
@@ -43,7 +43,8 @@
   },
   "homepage": "https://github.com/nileshpatel17/ng-multiselect-dropdown#readme",
   "peerDependencies": {
-    "@angular/core": "^4.0.0 || ^8.2.2"
+    "@angular/common": ">=2.0.0",
+    "@angular/core": ">=2.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.802.2",
@@ -52,7 +53,7 @@
     "@angular/common": "8.2.2",
     "@angular/compiler": "8.2.2",
     "@angular/compiler-cli": "8.2.2",
-    "@angular/core": "5.2.9",
+    "@angular/core": "8.2.2",
     "@angular/forms": "8.2.2",
     "@angular/http": "7.2.15",
     "@angular/language-service": "8.2.2",

publish-package.md

@@ -2,8 +2,9 @@
 
 1.  yarn build:lib
 2.  navigate to dist-lib folder
-3.  yarn publish
-4.  yarn deployOnly
+3.  login to npm registry (npm login)
+4.  yarn publish
+5.  yarn deployOnly
 
 ## Angular Multiselect Dropdown
 

src/app/components/select/multiple-demo.ts

@@ -1,6 +1,6 @@
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
-import { IDropdownSettings } from '../../../ng-multiselect-dropdown/src';
+import { IDropdownSettings } from 'ng-multiselect-dropdown';
 
 @Component({
   selector: 'multiple-demo',

src/code-viewer/code-viewer.ts

@@ -110,7 +110,7 @@ export class CodeViewerComponent implements OnInit, OnChanges, AfterViewChecked
     @Input() useBr: boolean;
     @Input() code: string;
     @Input() language: string;
-    @ViewChild('codeView') codeView: ElementRef;
+    @ViewChild('codeView', { static: false }) codeView: ElementRef;
     private needUpdate: boolean;
 
     constructor(private elementRef: ElementRef) {}

src/ng-multiselect-dropdown/src/public_api.ts

@@ -1,2 +1,3 @@
 export { MultiSelectComponent } from './multiselect.component';
 export { NgMultiSelectDropDownModule } from './ng-multiselect-dropdown.module';
+export { IDropdownSettings } from './multiselect.model';

src/ng-multiselect-dropdown/test/multi-select.component.spec.ts

@@ -9,7 +9,7 @@ import { createTestingModule, tickAndDetectChanges } from './helper';
   template: ``
 })
 class Ng2MultiSelectDropdownSingleSelect {
-  @ViewChild(MultiSelectComponent)
+  @ViewChild(MultiSelectComponent, { static: false })
   select: MultiSelectComponent;
   cities = [
     { item_id: 1, item_text: 'Mumbai' },
@@ -35,7 +35,7 @@ class Ng2MultiSelectDropdownSingleSelect {
   template: ``
 })
 class Ng2MultiSelectDropdownMultipleSelect {
-  @ViewChild(MultiSelectComponent)
+  @ViewChild(MultiSelectComponent, { static: false })
   select: MultiSelectComponent;
   cities = [
     { item_id: 1, item_text: 'Mumbai' },

src/ng-multiselect-dropdown/test/multi-select.component1.spec.ts

@@ -9,7 +9,7 @@ import { createTestingModule, tickAndDetectChanges } from './helper'
     template: ``
 })
 class Ng2MultiSelectDropdownMultipleSelect_defaultPlaceHolderText {
-    @ViewChild(MultiSelectComponent) select: MultiSelectComponent;
+    @ViewChild(MultiSelectComponent, { static: false }) select: MultiSelectComponent;
     cities = [];
     selectedItem = [];
     dropdownSettings: IDropdownSettings = {
@@ -28,7 +28,7 @@ const NO_DATA_AVAILABLE = 'NO DATA AVAILABLE'
     template: ``
 })
 class Ng2MultiSelectDropdownMultipleSelect_CustomPlaceHolderText {
-    @ViewChild(MultiSelectComponent) select: MultiSelectComponent;
+    @ViewChild(MultiSelectComponent, { static: false }) select: MultiSelectComponent;
     cities = [];
     selectedItem = [];
     dropdownSettings: IDropdownSettings = {

src/ng-multiselect-dropdown/test/multi-select.component2.spec.ts

@@ -9,7 +9,7 @@ import { createTestingModule, tickAndDetectChanges } from './helper'
     template: ``
 })
 class Ng2MultiSelectDropdownMultipleSelect {
-    @ViewChild(MultiSelectComponent) select: MultiSelectComponent;
+    @ViewChild(MultiSelectComponent, { static: false }) select: MultiSelectComponent;
     cities = [
         { item_id: 0, item_text: 'Navsari' },
         { item_id: 1, item_text: 'Mumbai' },

src/polyfills.ts

@@ -11,62 +11,53 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
-
 /**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
-
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
 
 /***************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';