From 1db171857abff425c8cf9be9f00f32e229ac7344 Mon Sep 17 00:00:00 2001
From: chang <qwefgh90@naver.com>
Date: Fri, 24 Dec 2021 21:07:09 +0900
Subject: [PATCH] Breaking changes on inputs

---
 angular.json                                  | 115 +++++---
 package-lock.json                             | 142 +++++-----
 package.json                                  |   7 +-
 projects/demo-v10/.browserslistrc             |  18 ++
 .../{demo => demo-v10}/e2e/protractor.conf.js |   8 +-
 .../e2e/src/app.e2e-spec.ts                   |   2 +-
 projects/{demo => demo-v10}/e2e/src/app.po.ts |   6 +-
 projects/{demo => demo-v10}/e2e/tsconfig.json |   1 +
 projects/demo-v10/karma.conf.js               |  32 +++
 .../{demo => demo-v10}/src/app/app.module.ts  |   0
 .../src/app/example.component.css             |   2 +-
 .../src/app/example.component.html            |   8 +-
 .../src/app/example.component.ts              |  30 +-
 .../{demo => demo-v10}/src/assets/.gitkeep    |   0
 .../src/environments/environment.prod.ts      |   0
 .../src/environments/environment.ts           |   0
 projects/{demo => demo-v10}/src/favicon.ico   | Bin
 projects/{demo => demo-v10}/src/index.html    |   2 +-
 projects/{demo => demo-v10}/src/main.ts       |   0
 projects/{demo => demo-v10}/src/polyfills.ts  |   6 +-
 .../styles.css => demo-v10/src/styles.scss}   |   0
 projects/{demo => demo-v10}/src/test.ts       |   7 +-
 projects/{demo => demo-v10}/tsconfig.app.json |   7 +-
 .../{demo => demo-v10}/tsconfig.spec.json     |   4 +-
 projects/{demo => demo-v10}/tslint.json       |   0
 projects/demo/.browserslistrc                 |  12 -
 projects/ng-terminal/README.md                |  24 --
 projects/ng-terminal/karma.conf.js            |   2 +-
 projects/ng-terminal/package.json             |   8 +-
 .../ng-terminal/src/lib/display-option.ts     |  50 ++--
 .../src/lib/ng-terminal.component.css         |   3 +
 .../src/lib/ng-terminal.component.html        |   2 +-
 .../ng-terminal.component.material.spec.ts    |  19 +-
 .../src/lib/ng-terminal.component.spec.ts     | 124 +++++----
 .../src/lib/ng-terminal.component.ts          | 257 +++++++++++-------
 projects/ng-terminal/src/lib/ng-terminal.ts   |   7 +-
 projects/ng-terminal/src/public-api.ts        |   2 +-
 projects/ng-terminal/src/test.ts              |   8 +-
 projects/ng-terminal/tsconfig.lib.json        |   7 +-
 projects/ng-terminal/tsconfig.lib.prod.json   |  10 +
 projects/ng-terminal/tsconfig.spec.json       |   4 +-
 projects/test/README.md                       |  24 ++
 projects/{demo => test}/karma.conf.js         |   2 +-
 projects/test/ng-package.json                 |   7 +
 projects/test/package.json                    |  11 +
 projects/test/src/lib/test.component.spec.ts  |  25 ++
 projects/test/src/lib/test.component.ts       |  20 ++
 projects/test/src/lib/test.module.ts          |  12 +
 projects/test/src/lib/test.service.spec.ts    |  16 ++
 projects/test/src/lib/test.service.ts         |   9 +
 projects/test/src/public-api.ts               |   7 +
 projects/test/src/test.ts                     |  26 ++
 projects/test/tsconfig.lib.json               |  25 ++
 projects/test/tsconfig.lib.prod.json          |  10 +
 projects/test/tsconfig.spec.json              |  17 ++
 projects/test/tslint.json                     |  17 ++
 tsconfig.json                                 |   4 +
 57 files changed, 780 insertions(+), 388 deletions(-)
 create mode 100644 projects/demo-v10/.browserslistrc
 rename projects/{demo => demo-v10}/e2e/protractor.conf.js (75%)
 rename projects/{demo => demo-v10}/e2e/src/app.e2e-spec.ts (89%)
 rename projects/{demo => demo-v10}/e2e/src/app.po.ts (56%)
 rename projects/{demo => demo-v10}/e2e/tsconfig.json (74%)
 create mode 100644 projects/demo-v10/karma.conf.js
 rename projects/{demo => demo-v10}/src/app/app.module.ts (100%)
 rename projects/{demo => demo-v10}/src/app/example.component.css (61%)
 rename projects/{demo => demo-v10}/src/app/example.component.html (91%)
 rename projects/{demo => demo-v10}/src/app/example.component.ts (77%)
 rename projects/{demo => demo-v10}/src/assets/.gitkeep (100%)
 rename projects/{demo => demo-v10}/src/environments/environment.prod.ts (100%)
 rename projects/{demo => demo-v10}/src/environments/environment.ts (100%)
 rename projects/{demo => demo-v10}/src/favicon.ico (100%)
 rename projects/{demo => demo-v10}/src/index.html (91%)
 rename projects/{demo => demo-v10}/src/main.ts (100%)
 rename projects/{demo => demo-v10}/src/polyfills.ts (96%)
 rename projects/{demo/src/styles.css => demo-v10/src/styles.scss} (100%)
 rename projects/{demo => demo-v10}/src/test.ts (81%)
 rename projects/{demo => demo-v10}/tsconfig.app.json (67%)
 rename projects/{demo => demo-v10}/tsconfig.spec.json (72%)
 rename projects/{demo => demo-v10}/tslint.json (100%)
 delete mode 100644 projects/demo/.browserslistrc
 delete mode 100644 projects/ng-terminal/README.md
 create mode 100644 projects/ng-terminal/tsconfig.lib.prod.json
 create mode 100644 projects/test/README.md
 rename projects/{demo => test}/karma.conf.js (93%)
 create mode 100644 projects/test/ng-package.json
 create mode 100644 projects/test/package.json
 create mode 100644 projects/test/src/lib/test.component.spec.ts
 create mode 100644 projects/test/src/lib/test.component.ts
 create mode 100644 projects/test/src/lib/test.module.ts
 create mode 100644 projects/test/src/lib/test.service.spec.ts
 create mode 100644 projects/test/src/lib/test.service.ts
 create mode 100644 projects/test/src/public-api.ts
 create mode 100644 projects/test/src/test.ts
 create mode 100644 projects/test/tsconfig.lib.json
 create mode 100644 projects/test/tsconfig.lib.prod.json
 create mode 100644 projects/test/tsconfig.spec.json
 create mode 100644 projects/test/tslint.json

diff --git a/angular.json b/angular.json
index 2d0dfb7..42b73aa 100644
--- a/angular.json
+++ b/angular.json
@@ -38,28 +38,32 @@
         }
       }
     },
-    "demo": {
+    "demo-v10": {
       "projectType": "application",
-      "schematics": {},
-      "root": "projects/demo",
-      "sourceRoot": "projects/demo/src",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/demo-v10",
+      "sourceRoot": "projects/demo-v10/src",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/demo",
-            "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
-            "tsConfig": "projects/demo/tsconfig.app.json",
-            "aot": false,
+            "outputPath": "dist/demo-v10",
+            "index": "projects/demo-v10/src/index.html",
+            "main": "projects/demo-v10/src/main.ts",
+            "polyfills": "projects/demo-v10/src/polyfills.ts",
+            "tsConfig": "projects/demo-v10/tsconfig.app.json",
+            "aot": true,
             "assets": [
-              "projects/demo/src/favicon.ico",
-              "projects/demo/src/assets"
+              "projects/demo-v10/src/favicon.ico",
+              "projects/demo-v10/src/assets"
             ],
             "styles": [
-              "projects/demo/src/styles.css"
+              "projects/demo-v10/src/styles.scss"
             ],
             "scripts": []
           },
@@ -67,8 +71,8 @@
             "production": {
               "fileReplacements": [
                 {
-                  "replace": "projects/demo/src/environments/environment.ts",
-                  "with": "projects/demo/src/environments/environment.prod.ts"
+                  "replace": "projects/demo-v10/src/environments/environment.ts",
+                  "with": "projects/demo-v10/src/environments/environment.prod.ts"
                 }
               ],
               "optimization": true,
@@ -76,7 +80,6 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -98,33 +101,33 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build"
+            "browserTarget": "demo-v10:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "browserTarget": "demo-v10:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "browserTarget": "demo-v10:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/demo/src/test.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
-            "tsConfig": "projects/demo/tsconfig.spec.json",
-            "karmaConfig": "projects/demo/karma.conf.js",
+            "main": "projects/demo-v10/src/test.ts",
+            "polyfills": "projects/demo-v10/src/polyfills.ts",
+            "tsConfig": "projects/demo-v10/tsconfig.spec.json",
+            "karmaConfig": "projects/demo-v10/karma.conf.js",
             "assets": [
-              "projects/demo/src/favicon.ico",
-              "projects/demo/src/assets"
+              "projects/demo-v10/src/favicon.ico",
+              "projects/demo-v10/src/assets"
             ],
             "styles": [
-              "projects/demo/src/styles.css"
+              "projects/demo-v10/src/styles.scss"
             ],
             "scripts": []
           }
@@ -133,9 +136,9 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/demo/tsconfig.app.json",
-              "projects/demo/tsconfig.spec.json",
-              "projects/demo/e2e/tsconfig.json"
+              "projects/demo-v10/tsconfig.app.json",
+              "projects/demo-v10/tsconfig.spec.json",
+              "projects/demo-v10/e2e/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -145,16 +148,60 @@
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "projects/demo/e2e/protractor.conf.js",
-            "devServerTarget": "demo:serve"
+            "protractorConfig": "projects/demo-v10/e2e/protractor.conf.js",
+            "devServerTarget": "demo-v10:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "demo:serve:production"
+              "devServerTarget": "demo-v10:serve:production"
             }
           }
         }
       }
-    }},
-  "defaultProject": "ng-terminal"
+    },
+    "test": {
+      "projectType": "library",
+      "root": "projects/test",
+      "sourceRoot": "projects/test/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/test/tsconfig.lib.json",
+            "project": "projects/test/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/test/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/test/src/test.ts",
+            "tsConfig": "projects/test/tsconfig.spec.json",
+            "karmaConfig": "projects/test/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/test/tsconfig.lib.json",
+              "projects/test/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng-terminal",
+  "cli": {
+    "analytics": false
+  }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 47b46a1..cea6750 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4984,9 +4984,9 @@
       }
     },
     "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -6901,9 +6901,9 @@
       }
     },
     "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -7742,9 +7742,9 @@
       }
     },
     "node_modules/hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
     "node_modules/hpack.js": {
@@ -9099,9 +9099,9 @@
       "dev": true
     },
     "node_modules/json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true
     },
     "node_modules/json-schema-traverse": {
@@ -9175,24 +9175,24 @@
       }
     },
     "node_modules/jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
       }
     },
     "node_modules/jszip": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz",
-      "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz",
+      "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==",
       "dev": true,
       "dependencies": {
         "lie": "~3.3.0",
@@ -9883,9 +9883,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
     "node_modules/lodash.clonedeep": {
@@ -10820,9 +10820,9 @@
       }
     },
     "node_modules/ng-packagr/node_modules/glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -12141,9 +12141,9 @@
       }
     },
     "node_modules/path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "node_modules/path-to-regexp": {
@@ -13188,9 +13188,9 @@
       }
     },
     "node_modules/protractor/node_modules/cliui/node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -13354,9 +13354,9 @@
       }
     },
     "node_modules/protractor/node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -22010,9 +22010,9 @@
           "dev": true
         },
         "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
@@ -23616,9 +23616,9 @@
           }
         },
         "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
@@ -24278,9 +24278,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
     "hpack.js": {
@@ -25326,9 +25326,9 @@
       "dev": true
     },
     "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "dev": true
     },
     "json-schema-traverse": {
@@ -25390,21 +25390,21 @@
       }
     },
     "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
       }
     },
     "jszip": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz",
-      "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.7.1.tgz",
+      "integrity": "sha512-ghL0tz1XG9ZEmRMcEN2vt7xabrDdqHHeykgARpmZ0BiIctWxM47Vt63ZO2dnp4QYt/xJVLLy5Zv1l/xRdh2byg==",
       "dev": true,
       "requires": {
         "lie": "~3.3.0",
@@ -25944,9 +25944,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
     "lodash.clonedeep": {
@@ -26706,9 +26706,9 @@
           "optional": true
         },
         "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
@@ -27777,9 +27777,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "path-to-regexp": {
@@ -28668,9 +28668,9 @@
           },
           "dependencies": {
             "ansi-regex": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-              "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+              "version": "5.0.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
               "dev": true
             },
             "strip-ansi": {
@@ -28794,9 +28794,9 @@
           },
           "dependencies": {
             "ansi-regex": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-              "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+              "version": "5.0.1",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
               "dev": true
             },
             "ansi-styles": {
diff --git a/package.json b/package.json
index 92ac886..38a6fe5 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,16 @@
   "name": "ng-terminal-workspace",
   "version": "0.0.0",
   "scripts": {
-    "start": "npm run build && ng serve demo",
+    "start": "npm run build && ng serve demo-v10",
     "build": "npm run lib:build",
     "test": "npm run lib:test",
-    "page": "npm run lib:build && ng build demo --prod --output-path docs --base-href /ng-terminal/",
+    "page": "npm run lib:build && ng build demo-v10 --prod --output-path docs --base-href /ng-terminal/",
     "lib:build": "ng build ng-terminal",
     "lib:test": "ng test ng-terminal",
     "lib:travis:test": "ng test ng-terminal --watch false --browsers ChromeHeadless",
     "lib:publish": "npm run lib:build && cd dist/ng-terminal && npm publish",
-    "add-licenses": "license-checker > LICENSE-THIRD-PARTY"
+    "add-licenses": "license-checker > LICENSE-THIRD-PARTY",
+    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
diff --git a/projects/demo-v10/.browserslistrc b/projects/demo-v10/.browserslistrc
new file mode 100644
index 0000000..0ccadaf
--- /dev/null
+++ b/projects/demo-v10/.browserslistrc
@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/projects/demo/e2e/protractor.conf.js b/projects/demo-v10/e2e/protractor.conf.js
similarity index 75%
rename from projects/demo/e2e/protractor.conf.js
rename to projects/demo-v10/e2e/protractor.conf.js
index 7c798cf..f238c0b 100644
--- a/projects/demo/e2e/protractor.conf.js
+++ b/projects/demo-v10/e2e/protractor.conf.js
@@ -2,7 +2,7 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 
 /**
  * @type { import("protractor").Config }
@@ -27,6 +27,10 @@ exports.config = {
     require('ts-node').register({
       project: require('path').join(__dirname, './tsconfig.json')
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
   }
 };
\ No newline at end of file
diff --git a/projects/demo/e2e/src/app.e2e-spec.ts b/projects/demo-v10/e2e/src/app.e2e-spec.ts
similarity index 89%
rename from projects/demo/e2e/src/app.e2e-spec.ts
rename to projects/demo-v10/e2e/src/app.e2e-spec.ts
index c360449..f1e1470 100644
--- a/projects/demo/e2e/src/app.e2e-spec.ts
+++ b/projects/demo-v10/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('demo app is running!');
+    expect(page.getTitleText()).toEqual('demo-v10 app is running!');
   });
 
   afterEach(async () => {
diff --git a/projects/demo/e2e/src/app.po.ts b/projects/demo-v10/e2e/src/app.po.ts
similarity index 56%
rename from projects/demo/e2e/src/app.po.ts
rename to projects/demo-v10/e2e/src/app.po.ts
index b8498c2..b68475e 100644
--- a/projects/demo/e2e/src/app.po.ts
+++ b/projects/demo-v10/e2e/src/app.po.ts
@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
   }
 
-  getTitleText() {
+  getTitleText(): Promise<string> {
     return element(by.css('app-root .content span')).getText() as Promise<string>;
   }
 }
diff --git a/projects/demo/e2e/tsconfig.json b/projects/demo-v10/e2e/tsconfig.json
similarity index 74%
rename from projects/demo/e2e/tsconfig.json
rename to projects/demo-v10/e2e/tsconfig.json
index 3d809e8..4f6467f 100644
--- a/projects/demo/e2e/tsconfig.json
+++ b/projects/demo-v10/e2e/tsconfig.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
diff --git a/projects/demo-v10/karma.conf.js b/projects/demo-v10/karma.conf.js
new file mode 100644
index 0000000..7b80729
--- /dev/null
+++ b/projects/demo-v10/karma.conf.js
@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/demo-v10'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
diff --git a/projects/demo/src/app/app.module.ts b/projects/demo-v10/src/app/app.module.ts
similarity index 100%
rename from projects/demo/src/app/app.module.ts
rename to projects/demo-v10/src/app/app.module.ts
diff --git a/projects/demo/src/app/example.component.css b/projects/demo-v10/src/app/example.component.css
similarity index 61%
rename from projects/demo/src/app/example.component.css
rename to projects/demo-v10/src/app/example.component.css
index 4a9ee3c..7fa8a00 100644
--- a/projects/demo/src/app/example.component.css
+++ b/projects/demo-v10/src/app/example.component.css
@@ -1,4 +1,4 @@
 .ng-terminal{
     display: block;
-    height: 50vh;
+    min-height: 30vh;
 }
\ No newline at end of file
diff --git a/projects/demo/src/app/example.component.html b/projects/demo-v10/src/app/example.component.html
similarity index 91%
rename from projects/demo/src/app/example.component.html
rename to projects/demo-v10/src/app/example.component.html
index b8e3faf..ba3a42a 100644
--- a/projects/demo/src/app/example.component.html
+++ b/projects/demo-v10/src/app/example.component.html
@@ -1,6 +1,10 @@
 <h2>{{title}}</h2>
-<ng-terminal #term [dataSource]="writeSubject" (keyInput)="onKeyInput($event)" [displayOption]="displayOptionBounded"
-[ngClass]="{'ng-terminal': (displayOption.activateDraggableOnEdge == undefined && displayOption.fixedGrid == undefined)}">
+<ng-terminal #term [dataSource]="writeSubject" (keyInput)="onKeyInput($event)" 
+[rows]="rowsControl.value"
+[cols]="colsControl.value"
+[draggable]="resizable"
+class="ng-terminal"
+>
 </ng-terminal>
 <div [class.mat-elevation-z1]="true"
     style="padding-left: 1em; padding-top: 0.3em; margin-top: 0.7em; padding-bottom: 1em">
diff --git a/projects/demo/src/app/example.component.ts b/projects/demo-v10/src/app/example.component.ts
similarity index 77%
rename from projects/demo/src/app/example.component.ts
rename to projects/demo-v10/src/app/example.component.ts
index f524b78..95f0f6b 100644
--- a/projects/demo/src/app/example.component.ts
+++ b/projects/demo-v10/src/app/example.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { NgTerminal, NgTerminalComponent } from 'ng-terminal';
 import { FormControl } from '@angular/forms';
-import { DisplayOption } from 'ng-terminal';
+// import { DisplayOption } from 'ng-terminal';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Terminal } from 'xterm';
 import { FunctionsUsingCSI } from 'ng-terminal';
@@ -25,8 +25,8 @@ export class ExampleComponent implements OnInit, AfterViewInit {
   colsControl = new FormControl();
   inputControl = new FormControl();
 
-  displayOption: DisplayOption = {};
-  displayOptionBounded: DisplayOption = {};//now it's not used
+  // displayOption: DisplayOption = {};
+  // displayOptionBounded: DisplayOption = {};//now it's not used
   underlying: Terminal;
 
   @ViewChild('term', {static: false}) child: NgTerminal;
@@ -70,21 +70,21 @@ export class ExampleComponent implements OnInit, AfterViewInit {
   }
 
   invalidate() {
-    if (this.resizable)
-      this.displayOption.activateDraggableOnEdge = { minWidth: 100, minHeight: 100 };
-    else
-      this.displayOption.activateDraggableOnEdge = undefined;
-    if (this.fixed)
-      this.displayOption.fixedGrid = { rows: this.rowsControl.value, cols: this.colsControl.value };
-    else
-      this.displayOption.fixedGrid = undefined;
-    this.child.setDisplayOption(this.displayOption);
+    // if (this.resizable)
+    //   this.displayOption.activateDraggableOnEdge = { minWidth: 100, minHeight: 100 };
+    // else
+    //   this.displayOption.activateDraggableOnEdge = undefined;
+    // if (this.fixed)
+    //   this.displayOption.fixedGrid = { rows: this.rowsControl.value, cols: this.colsControl.value };
+    // else
+    //   this.displayOption.fixedGrid = undefined;
+    // this.child.setDisplayOption(this.displayOption);
   }
 
   resizableChange(event: MatSlideToggleChange) {
     this.resizable = event.checked;
     if (this.resizable){
-      this.child.setStyle({"border": "4px solid #85858a"});
+      // this.child.setStyle({"border": "4px solid #85858a"});
       this.fixed = false;
     }
     this.invalidate();
@@ -93,7 +93,7 @@ export class ExampleComponent implements OnInit, AfterViewInit {
   fixedChange(event: MatSlideToggleChange) {
     this.fixed = event.checked;
     if (this.fixed){
-      this.child.setStyle({"border": "unset"});
+      // this.child.setStyle({"border": "unset"});
       this.resizable = false;
     }
     this.invalidate();
@@ -110,6 +110,6 @@ export class ExampleComponent implements OnInit, AfterViewInit {
   }
 
   get displayOptionForLiveUpdate() {
-    return JSON.parse(JSON.stringify(this.displayOption));
+    return {rows: this.rowsControl.value, cols: this.colsControl.value, draggable: this.resizable};
   }
 }
diff --git a/projects/demo/src/assets/.gitkeep b/projects/demo-v10/src/assets/.gitkeep
similarity index 100%
rename from projects/demo/src/assets/.gitkeep
rename to projects/demo-v10/src/assets/.gitkeep
diff --git a/projects/demo/src/environments/environment.prod.ts b/projects/demo-v10/src/environments/environment.prod.ts
similarity index 100%
rename from projects/demo/src/environments/environment.prod.ts
rename to projects/demo-v10/src/environments/environment.prod.ts
diff --git a/projects/demo/src/environments/environment.ts b/projects/demo-v10/src/environments/environment.ts
similarity index 100%
rename from projects/demo/src/environments/environment.ts
rename to projects/demo-v10/src/environments/environment.ts
diff --git a/projects/demo/src/favicon.ico b/projects/demo-v10/src/favicon.ico
similarity index 100%
rename from projects/demo/src/favicon.ico
rename to projects/demo-v10/src/favicon.ico
diff --git a/projects/demo/src/index.html b/projects/demo-v10/src/index.html
similarity index 91%
rename from projects/demo/src/index.html
rename to projects/demo-v10/src/index.html
index f9f06e7..1d0f239 100644
--- a/projects/demo/src/index.html
+++ b/projects/demo-v10/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Demo</title>
+  <title>DemoV10</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
diff --git a/projects/demo/src/main.ts b/projects/demo-v10/src/main.ts
similarity index 100%
rename from projects/demo/src/main.ts
rename to projects/demo-v10/src/main.ts
diff --git a/projects/demo/src/polyfills.ts b/projects/demo-v10/src/polyfills.ts
similarity index 96%
rename from projects/demo/src/polyfills.ts
rename to projects/demo-v10/src/polyfills.ts
index aa665d6..d5f67bd 100644
--- a/projects/demo/src/polyfills.ts
+++ b/projects/demo-v10/src/polyfills.ts
@@ -18,7 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
@@ -35,7 +37,7 @@
  * 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';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
diff --git a/projects/demo/src/styles.css b/projects/demo-v10/src/styles.scss
similarity index 100%
rename from projects/demo/src/styles.css
rename to projects/demo-v10/src/styles.scss
diff --git a/projects/demo/src/test.ts b/projects/demo-v10/src/test.ts
similarity index 81%
rename from projects/demo/src/test.ts
rename to projects/demo-v10/src/test.ts
index 1631789..50193eb 100644
--- a/projects/demo/src/test.ts
+++ b/projects/demo-v10/src/test.ts
@@ -7,7 +7,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
diff --git a/projects/demo/tsconfig.app.json b/projects/demo-v10/tsconfig.app.json
similarity index 67%
rename from projects/demo/tsconfig.app.json
rename to projects/demo-v10/tsconfig.app.json
index 4e4da7d..fd37f74 100644
--- a/projects/demo/tsconfig.app.json
+++ b/projects/demo-v10/tsconfig.app.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
@@ -9,10 +10,6 @@
     "src/polyfills.ts"
   ],
   "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/test.ts",
-    "src/**/*.spec.ts"
+    "src/**/*.d.ts"
   ]
 }
diff --git a/projects/demo/tsconfig.spec.json b/projects/demo-v10/tsconfig.spec.json
similarity index 72%
rename from projects/demo/tsconfig.spec.json
rename to projects/demo-v10/tsconfig.spec.json
index a8ce1d3..b66a2f0 100644
--- a/projects/demo/tsconfig.spec.json
+++ b/projects/demo-v10/tsconfig.spec.json
@@ -1,10 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": [
-      "jasmine",
-      "node"
+      "jasmine"
     ]
   },
   "files": [
diff --git a/projects/demo/tslint.json b/projects/demo-v10/tslint.json
similarity index 100%
rename from projects/demo/tslint.json
rename to projects/demo-v10/tslint.json
diff --git a/projects/demo/.browserslistrc b/projects/demo/.browserslistrc
deleted file mode 100644
index 8084853..0000000
--- a/projects/demo/.browserslistrc
+++ /dev/null
@@ -1,12 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
diff --git a/projects/ng-terminal/README.md b/projects/ng-terminal/README.md
deleted file mode 100644
index a500ab8..0000000
--- a/projects/ng-terminal/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# NgTerminal
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ng-terminal` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-terminal`.
-> Note: Don't forget to add `--project ng-terminal` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build ng-terminal` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ng-terminal`, go to the dist folder `cd dist/ng-terminal` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test ng-terminal` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/projects/ng-terminal/karma.conf.js b/projects/ng-terminal/karma.conf.js
index 1de0bb4..1ec615f 100644
--- a/projects/ng-terminal/karma.conf.js
+++ b/projects/ng-terminal/karma.conf.js
@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ng-terminal'),
+      dir: require('path').join(__dirname, '../../coverage/test'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
diff --git a/projects/ng-terminal/package.json b/projects/ng-terminal/package.json
index 0df4e78..bfcb4e5 100644
--- a/projects/ng-terminal/package.json
+++ b/projects/ng-terminal/package.json
@@ -4,9 +4,9 @@
   "description": "NgTerminal is a terminal component on Angular8 or higher.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=8.2.14",
-    "@angular/core": ">=8.2.14",
-    "rxjs": ">=6.4.0",
+    "@angular/common": "~10.2.5",
+    "@angular/core": "~10.2.5",
+    "rxjs": "~6.6.7",
     "angular-resizable-element": "^3.3.5",
     "xterm-addon-fit": "^0.5.0",
     "xterm": "^4.16.0"
@@ -27,8 +27,6 @@
   "keywords": [
     "emulator",
     "angular",
-    "angular8",
-    "angular9",
     "angular10",
     "angular11",
     "xterm",
diff --git a/projects/ng-terminal/src/lib/display-option.ts b/projects/ng-terminal/src/lib/display-option.ts
index affe614..f14327d 100644
--- a/projects/ng-terminal/src/lib/display-option.ts
+++ b/projects/ng-terminal/src/lib/display-option.ts
@@ -2,26 +2,32 @@
  * options for dimensions of terminal.
  * fixedGrid has high priority than activateDraggableOnEdge's
  */
-export interface DisplayOption{
-    fixedGrid?: {rows: number, cols: number};
-    activateDraggableOnEdge?: {
-        minWidth: number,
-        minHeight: number
-    }
-}
+// export interface DisplayOption{
+//     fixedGrid?: {rows: number, cols: number};
+//     activateDraggableOnEdge?: {
+//         minWidth: number,
+//         minHeight: number
+//     }
+// }
 
-export function compareDisplayOption(op1: DisplayOption, op2: DisplayOption){
-    if(op1?.fixedGrid?.rows != op2?.fixedGrid?.rows){
-        return false;
-    }
-    if(op1?.fixedGrid?.cols != op2?.fixedGrid?.cols){
-        return false;
-    }
-    if(op1?.activateDraggableOnEdge?.minWidth != op2?.activateDraggableOnEdge?.minWidth){
-        return false;
-    }
-    if(op1?.activateDraggableOnEdge?.minHeight != op2?.activateDraggableOnEdge?.minHeight){
-        return false;
-    }
-    return true;
-}
\ No newline at end of file
+// export function compareDisplayOption(op1: DisplayOption, op2: DisplayOption){
+//     if(op1?.fixedGrid?.rows != op2?.fixedGrid?.rows){
+//         return false;
+//     }
+//     if(op1?.fixedGrid?.cols != op2?.fixedGrid?.cols){
+//         return false;
+//     }
+//     if(op1?.activateDraggableOnEdge?.minWidth != op2?.activateDraggableOnEdge?.minWidth){
+//         return false;
+//     }
+//     if(op1?.activateDraggableOnEdge?.minHeight != op2?.activateDraggableOnEdge?.minHeight){
+//         return false;
+//     }
+//     return true;
+// }
+
+// export function isEmptyDisplayOption(op: DisplayOption){
+//     if(!op.fixedGrid && !op.activateDraggableOnEdge)
+//         return true;
+//     return false;
+// }
\ No newline at end of file
diff --git a/projects/ng-terminal/src/lib/ng-terminal.component.css b/projects/ng-terminal/src/lib/ng-terminal.component.css
index 3bf0e68..7eb89da 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.component.css
+++ b/projects/ng-terminal/src/lib/ng-terminal.component.css
@@ -1,4 +1,7 @@
 .terminal-outer {
     box-sizing: border-box;
     height: 100%;
+}
+.draggable{
+    border: 4px solid #85858a;
 }
\ No newline at end of file
diff --git a/projects/ng-terminal/src/lib/ng-terminal.component.html b/projects/ng-terminal/src/lib/ng-terminal.component.html
index 6f2e83a..ee5ceea 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.component.html
+++ b/projects/ng-terminal/src/lib/ng-terminal.component.html
@@ -1,6 +1,6 @@
 <global-style></global-style>
 
-<div #terminal class="terminal-outer" mwlResizable [ngStyle]="outerStyle" [validateResize]="validatorFactory()"
+<div #terminal class="terminal-outer" mwlResizable [validateResize]="validatorFactory()"
     [enableGhostResize]="true"
     [resizeEdges]="isDraggableOnEdgeActivated ? {bottom: true, right: true} : {bottom: false, right: false}"
     (resizeEnd)="onResizeEnd($event.rectangle.left, $event.rectangle.top, $event.rectangle.width, $event.rectangle.height)">
diff --git a/projects/ng-terminal/src/lib/ng-terminal.component.material.spec.ts b/projects/ng-terminal/src/lib/ng-terminal.component.material.spec.ts
index 7dbd4df..dbb6976 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.component.material.spec.ts
+++ b/projects/ng-terminal/src/lib/ng-terminal.component.material.spec.ts
@@ -6,7 +6,7 @@ import { ResizableModule } from 'angular-resizable-element';
 import { Subject } from 'rxjs';
 import { keydown } from './test-util'
 import { FunctionsUsingCSI, KindOfEraseInDisplay, KindOfEraseInLine } from './functions-using-csi';
-import { ViewChild, Component, OnInit } from '@angular/core';
+import { ViewChild, Component, OnInit, SimpleChange } from '@angular/core';
 import { NgTerminal } from './ng-terminal';
 import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -64,10 +64,16 @@ describe('NgTerminalComponent with MaterialTab', () => {
 
   it(`gets a terminal component inside DOM`, fakeAsync(() => {
     mattabFixture.detectChanges();
+    tick(1000);
+    (mattabComponent.terminal as any).ngOnChanges({
+      _rows: new SimpleChange(undefined, undefined, true),
+      _cols: new SimpleChange(undefined, undefined, true),
+      _draggable: new SimpleChange(undefined, undefined, true)
+    });
+    tick(1000);
     mattabComponent.tabGroup.selectedIndex = 1;
     mattabFixture.detectChanges();
     tick(1000);
-    mattabFixture.detectChanges();
 
     let mattabEl = mattabFixture.nativeElement as HTMLElement;
     let xtermScreen = mattabEl.querySelector('.xterm-screen');
@@ -110,7 +116,8 @@ describe('NgTerminalComponent with MaterialTab', () => {
     mattabFixture.detectChanges();
     tick(1000);
 
-    mattabComponent.terminal.setDisplayOption({fixedGrid: {rows: 10, cols: 10}});
+    mattabComponent.terminal.setRows(10);
+    mattabComponent.terminal.setCols(10);
     mattabFixture.detectChanges();
     tick(1000);
     let mattabEl = mattabFixture.nativeElement as HTMLElement;
@@ -118,7 +125,8 @@ describe('NgTerminalComponent with MaterialTab', () => {
     let screenWidth1= xtermScreen.clientWidth;
     let screenHeight1= xtermScreen.clientHeight;
 
-    mattabComponent.terminal.setDisplayOption({fixedGrid: {rows: 15, cols: 15}});
+    mattabComponent.terminal.setRows(15);
+    mattabComponent.terminal.setCols(15);
     mattabFixture.detectChanges();
     tick(1000);
     let screenWidth2= xtermScreen.clientWidth;
@@ -126,7 +134,8 @@ describe('NgTerminalComponent with MaterialTab', () => {
     expect(screenWidth2).toBeGreaterThan(screenWidth1);
     expect(screenHeight2).toBeGreaterThan(screenHeight1);
 
-    mattabComponent.terminal.setDisplayOption({fixedGrid: {rows: 8, cols: 8}});
+    mattabComponent.terminal.setRows(8);
+    mattabComponent.terminal.setCols(8);
     mattabFixture.detectChanges();
     tick(1000);
     let screenWidth3= xtermScreen.clientWidth;
diff --git a/projects/ng-terminal/src/lib/ng-terminal.component.spec.ts b/projects/ng-terminal/src/lib/ng-terminal.component.spec.ts
index 56503c5..f9e178a 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.component.spec.ts
+++ b/projects/ng-terminal/src/lib/ng-terminal.component.spec.ts
@@ -6,6 +6,7 @@ import { ResizableModule } from 'angular-resizable-element';
 import { Subject } from 'rxjs';
 import { keydown } from './test-util'
 import { FunctionsUsingCSI, KindOfEraseInDisplay, KindOfEraseInLine } from './functions-using-csi';
+import { SimpleChange } from '@angular/core';
 
 describe('NgTerminalComponent', () => {
   let component: NgTerminalComponent;
@@ -43,21 +44,6 @@ describe('NgTerminalComponent', () => {
     expect(term.getSelection().trim()).toEqual(dummy);
   }));
 
-  it("make a scroll in xterm-viewport with write(newlines)", fakeAsync(() => {
-    const term = fixture.componentInstance.terminalDiv.nativeElement as HTMLElement;
-    component._displayOption = {fixedGrid:{rows: 4, cols: 4}};
-    fixture.detectChanges();
-    tick(1000);
-    
-    component.write('\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
-    fixture.detectChanges();
-    tick(1000);
-    const viewPort = term.querySelector('.xterm-viewport');
-    const height = viewPort.clientHeight;
-    const scrollHeight = viewPort.scrollHeight;
-    expect(scrollHeight).toBeGreaterThan(height);
-  }))
-
   it('keyInput', (doneFn) => {
     let arr = ['h','i','!','\n']
     let result = [];
@@ -115,7 +101,7 @@ describe('NgTerminalComponent', () => {
   })
 });
 
-describe('DisplayOption', () => {
+describe('Input properties', () => {
   let component: NgTerminalComponent;
   let fixture: ComponentFixture<NgTerminalComponent>;
 
@@ -137,25 +123,47 @@ describe('DisplayOption', () => {
     expect(component).toBeTruthy();
   });
 
-  it("@Input('displayOption')", () => {
+  it("@Input('rows'), @Input('cols')", fakeAsync(() => {
     const term = fixture.componentInstance.terminalDiv.nativeElement;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, undefined, true),
+      _cols: new SimpleChange(undefined, undefined, true),
+      _draggable: new SimpleChange(undefined, undefined, true)
+    });
+    tick(1000);
     const beforeWidth = term.clientWidth;
     const beforeHeight = term.clientHeight;
-    component._displayOption = {fixedGrid:{rows: 4, cols: 4}};
-    fixture.detectChanges();
-    
+    component._rows = 4;
+    component._cols = 4;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, 4, false),
+      _cols: new SimpleChange(undefined, 4, false)
+    });
+    tick(1000);
     const afterWidth = term.clientWidth;
     const afterHeight = term.clientHeight;
     
     expect(afterWidth).toBeLessThan(beforeWidth);
     expect(afterHeight).toBeLessThan(beforeHeight);
-  })
+  }))
 
-  it('should decrease div size after changing fixedSize', () => {
+  it('should decrease div size after changing fixedSize', fakeAsync(() => {
     const term = fixture.componentInstance.terminalDiv.nativeElement;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, undefined, true),
+      _cols: new SimpleChange(undefined, undefined, true),
+      _draggable: new SimpleChange(undefined, undefined, true)
+    });
+    tick(1000);
     const beforeWidth = term.clientWidth;
     const beforeHeight = term.clientHeight;
-    component.setDisplayOption({fixedGrid:{rows: 4, cols: 4}});
+    component._rows = 4;
+    component._cols = 4;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, 4, false),
+      _cols: new SimpleChange(undefined, 4, false)
+    });
+    tick(1000);
     fixture.detectChanges();
     
     const afterWidth = term.clientWidth;
@@ -163,31 +171,54 @@ describe('DisplayOption', () => {
     
     expect(afterWidth).toBeLessThan(beforeWidth);
     expect(afterHeight).toBeLessThan(beforeHeight);
-  })
+  }))
 
-  it('should increase div size after changing fixedSize', () => {
+  it('should increase div size after changing fixedSize', fakeAsync(() => {
     const term = fixture.componentInstance.terminalDiv.nativeElement;
-    component.setDisplayOption({fixedGrid:{rows: 4, cols: 4}});
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, undefined, true),
+      _cols: new SimpleChange(undefined, undefined, true),
+      _draggable: new SimpleChange(undefined, undefined, true)
+    });
+    tick(1000);
+
+    component._rows = 4;
+    component._cols = 4;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, 4, false),
+      _cols: new SimpleChange(undefined, 4, false)
+    });
+
     fixture.detectChanges();
+    tick(1000);
     const beforeWidth = term.clientWidth;
     const beforeHeight = term.clientHeight;
     
-    component.setDisplayOption({fixedGrid:{rows: 100, cols: 100}});
+    component._rows = 100;
+    component._cols = 100;
+    component.ngOnChanges({
+      _rows: new SimpleChange(undefined, 100, false),
+      _cols: new SimpleChange(undefined, 100, false)
+    });
     fixture.detectChanges();
+    tick(1000);
+
     const afterWidth = term.clientWidth;
     const afterHeight = term.clientHeight;
     
     expect(afterWidth).toBeGreaterThan(beforeWidth);
     expect(afterHeight).toBeGreaterThan(beforeHeight);
-  })
+  }))
 
   it('isDraggableOnEdgeActivated', () => {
-    component.setDisplayOption({activateDraggableOnEdge: { minWidth: 100, minHeight: 100 }});
+    component._rows = 100;
+    component._cols = 100;
     expect(component.isDraggableOnEdgeActivated).toBe(true);
   })
 
   it('validatorFactory()', () => {
-    component.setDisplayOption({activateDraggableOnEdge:{minHeight:100, minWidth:100}});
+    component._rows = 100;
+    component._cols = 100;
     let res1 = component.validatorFactory()({rectangle:{left: undefined, top: undefined, bottom: undefined, right: undefined, width: 99, height: 99}, edges: undefined})
     expect(res1).toBeFalsy('it must be false because it is smaller than minimum size');
     let res2 = component.validatorFactory()({rectangle:{left: undefined, top: undefined, bottom: undefined, right: undefined, width: 100, height: 100}, edges: undefined})
@@ -197,39 +228,6 @@ describe('DisplayOption', () => {
   });
 });
 
-describe('NgTerminalComponent before opening', () => {
-  let component: NgTerminalComponent;
-  let fixture: ComponentFixture<NgTerminalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ NgTerminalComponent, GlobalStyleComponent ],
-      imports: [ ResizableModule ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NgTerminalComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("@Input('displayOption')", () => {
-    component._displayOption = {
-      fixedGrid: {
-        cols: 100,
-        rows: 15
-      },
-      activateDraggableOnEdge: {
-        minHeight: 100,
-        minWidth: 100
-      }
-    };
-    
-    fixture.detectChanges();
-  })
-});
-
 describe('NgTerminalComponent with CSI functions', () => {
   let component: NgTerminalComponent;
   let fixture: ComponentFixture<NgTerminalComponent>;
diff --git a/projects/ng-terminal/src/lib/ng-terminal.component.ts b/projects/ng-terminal/src/lib/ng-terminal.component.ts
index de0780c..ccef3a9 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.component.ts
+++ b/projects/ng-terminal/src/lib/ng-terminal.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef, Input, Output, EventEmitter, OnDestroy, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef, Input, Output, EventEmitter, OnDestroy, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { NgTerminal } from './ng-terminal';
 import { Subject, Observable, Subscription, combineLatest, ObjectUnsubscribedError } from 'rxjs';
-import { compareDisplayOption as equalsDisplayOption, DisplayOption } from './display-option';
+// import { compareDisplayOption as equalsDisplayOption, DisplayOption } from './display-option';
 import { ResizeEvent } from 'angular-resizable-element';
+import { deprecate } from 'util';
 
 @Component({
   selector: 'ng-terminal',
@@ -12,26 +13,27 @@ import { ResizeEvent } from 'angular-resizable-element';
   styleUrls: ['./ng-terminal.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChecked, NgTerminal, OnDestroy {
+export class NgTerminalComponent implements OnInit, OnChanges, AfterViewInit, NgTerminal, OnDestroy {
   private term: Terminal;
   private fitAddon: FitAddon;
   private keyInputSubject: Subject<string> = new Subject<string>();
-  private keyEventSubject = new Subject<{key: string; domEvent: KeyboardEvent;}>();
-  // private termSnippetSubject = new Subject<()=>void>();
-  // private afterViewInitSubject = new Subject<void>();
-  
+  private keyEventSubject = new Subject<{ key: string; domEvent: KeyboardEvent; }>();
+  private requestRenderFromAPI = new Subject<{ rowColChange: boolean }>();
+  private afterViewInitSubject = new Subject<void>();
+
   private keyInputSubjectSubscription: Subscription;
   private keyEventSubjectSubscription: Subscription;
-  private termSnippetSubscription: Subscription;
+  private requestRenderSubscription: Subscription;
   private h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-  private displayOption: DisplayOption = {};
+  // private displayOption: DisplayOption = {};
   private dataSource: Observable<string>;
   private dataSourceSubscription: Subscription;
-  outerStyle: object = {};
+  preOuterStyle: Partial<CSSStyleDeclaration> = { 'display': 'block' };
+  outerStyle: Partial<CSSStyleDeclaration> = {};
 
   @Input('dataSource')
   set _dataSource(ds) {
-    if(this.dataSourceSubscription != null){
+    if (this.dataSourceSubscription != null) {
       this.dataSourceSubscription.unsubscribe();
     }
     this.dataSource = ds;
@@ -43,32 +45,57 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
     return this.dataSource;
   }
 
-  @Input('displayOption')
-  set _displayOption(opt: DisplayOption){
-    this.setDisplayOption(opt);
+  @Input('rows')
+  _rows?: number;
+  @Input('cols')
+  _cols?: number;
+  @Input('minWidth')
+  _minWidth?: number;
+  @Input('minHeight')
+  _minHeight?: number;
+  @Input('draggable')
+  _draggable?: boolean = true;
+
+  setDraggable(draggable: boolean): void {
+    this._draggable = draggable;
+    this.ref.markForCheck();
+  }
+
+  setRows(rows: number): void {
+    this._rows = rows;
+    this.requestRenderFromAPI.next({ rowColChange: true });
+  }
+
+  setCols(cols: number): void {
+    this._cols = cols;
+    this.requestRenderFromAPI.next({ rowColChange: true });
   }
 
   @Input('style')
-  set _style(opt: any){
+  set _style(opt: any) {
     this.setStyle(opt);
+    console.debug("style");
+    this.requestRenderFromAPI.next({ rowColChange: false });
   }
 
   @Output('keyInput')
-  keyInputEmitter  = new EventEmitter<string>();
+  keyInputEmitter = new EventEmitter<string>();
 
   @Output('keyEvent')
-  keyEventEmitter  = new EventEmitter<{key: string; domEvent: KeyboardEvent;}>();
+  keyEventEmitter = new EventEmitter<{ key: string; domEvent: KeyboardEvent; }>();
 
-  @ViewChild('terminal', { static: true }) 
+  @ViewChild('terminal', { static: true })
   terminalDiv: ElementRef;
 
-  constructor(private ref: ChangeDetectorRef) { 
-    // this.termSnippetSubscription = combineLatest(this.termSnippetSubject, this.afterViewInitSubject).subscribe(([snippet]) => {
-    //   snippet();
-    // });
+  constructor(private renderer: Renderer2, private ref: ChangeDetectorRef) {
+    this.requestRenderSubscription = combineLatest(this.requestRenderFromAPI, this.afterViewInitSubject).subscribe(([{ rowColChange }]) => {
+      if (rowColChange)
+        this.coordinateOuterAndTerminal(true);
+      else
+        this.coordinateOuterAndTerminal(false);
+    });
   }
-
-  private observableSetup(){
+  private observableSetup() {
     this.term.onData((input) => {
       this.keyInputSubject.next(input);
     });
@@ -81,45 +108,32 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
     this.keyEventSubjectSubscription = this.keyEventSubject.subscribe((e) => {
       this.keyEventEmitter.emit(e);
     });
-    // this.afterViewInitSubject.next();
-  }
-
-  /**
-   * set block or inline-block to #terminal for fitting client or outer element
-   */
-  private setOuterBlock(isBlock: boolean){
-    if(isBlock)
-      this.outerStyle['display'] = 'block';
-    else
-      this.outerStyle['display'] = 'inline-block';
   }
 
   /**
    * set dimensions
    */
   private setOuterDimensions(left: number, top: number, width: number, height: number) {
-    this.outerStyle['left'] = left ? `${left}px` : undefined;
-    this.outerStyle['top'] = top ? `${top}px` : undefined;
-    this.outerStyle['width'] = width ? `${width}px` : undefined;
-    this.outerStyle['height'] = height ? `${height}px` : undefined;
+    this.preOuterStyle['left'] = left ? `${left}px` : undefined;
+    this.preOuterStyle['top'] = top ? `${top}px` : undefined;
+    this.preOuterStyle['width'] = width ? `${width}px` : undefined;
+    this.preOuterStyle['height'] = height ? `${height}px` : undefined;
+    this.requestRenderFromAPI.next({ rowColChange: false });
   }
-  
+
   /**
    * remove dimensions
    */
-  private removeOuterDimensions(){
-    this.outerStyle['left'] = undefined;
-    this.outerStyle['top'] = undefined;
-    this.outerStyle['width'] = undefined;
-    this.outerStyle['height'] = undefined;
+  private removeOuterDimensions() {
+    this.requestRenderFromAPI.next({ rowColChange: false });
   }
 
-  private getDimensionsAheadOfRendering(): {width: number, height: number} | undefined {
+  private getDimensionsAheadOfRendering(): { width: number, height: number } | undefined {
     const proposedDimensions = this.fitAddon.proposeDimensions();
     const core = (this.underlying as any)._core;
     try {
       const actualWidth: number | undefined = core._renderService.dimensions.actualCellWidth as number | undefined;
-      const actualHeight: number | undefined = core._renderService.dimensions.actualCellWidth as number | undefined;
+      const actualHeight: number | undefined = core._renderService.dimensions.actualCellHeight as number | undefined;
       const scrollWidth: number = core.viewport.scrollBarWidth as number;
       if (actualWidth && actualHeight) {
         const width = actualWidth * proposedDimensions.cols + scrollWidth;
@@ -129,16 +143,33 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
     } catch (err) {
       console.debug(err);
     }
+    return undefined;
   }
 
-  setStyle(styleObject: any){
-    if(JSON.stringify(this.outerStyle) != JSON.stringify(styleObject)){
-      Object.assign(this.outerStyle, styleObject);
-      this.ref.markForCheck();
+  /**
+   * Render is being used for fast rendering without markForCheck().
+   */
+  private applyOuterStyleToElement() {
+    Object.keys(this.outerStyle).map(key => {
+      return { key, value: this.outerStyle[key] }
+    }).forEach(({ key, value }) => {
+      if (value)
+        this.renderer.setStyle(this.terminalDiv.nativeElement, key, value);
+      else {
+        this.renderer.removeStyle(this.terminalDiv.nativeElement, key);
+      }
+    });
+    this.preOuterStyle = this.outerStyle; //invalidate
+  }
+
+  setStyle(styleObject: any) {
+    if (JSON.stringify(this.preOuterStyle) != JSON.stringify(styleObject)) {
+      this.preOuterStyle = { ...this.preOuterStyle, ...styleObject };
+      this.requestRenderFromAPI.next({ rowColChange: false });
     }
   }
 
-  ngOnInit(){
+  ngOnInit() {
   }
 
   /**
@@ -151,45 +182,87 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
     this.term.loadAddon(this.fitAddon);
     this.observableSetup();
     console.debug('ngAfterViewInit');
+    this.afterViewInitSubject.next();
+    // this.ngOnChanges();
   }
 
-
+  ngOnChanges(changes?: SimpleChanges) {
+    console.group('ngOnChanges');
+    for (const propName in changes) {
+      console.debug('prop: ' + propName);
+    }
+    console.groupEnd();
+    if (changes?._rows || changes?._cols)
+      this.requestRenderFromAPI.next({ rowColChange: true });
+    else if (changes?._draggable && (changes._draggable.previousValue == true) && (changes._draggable.currentValue == false)) {
+      this.requestRenderFromAPI.next({ rowColChange: true });
+    } else
+      this.requestRenderFromAPI.next({ rowColChange: false });
+  }
   /**
-   * When a dimension of div changes, fit a terminal in div.
+   * It must be called after having initialized the terminal.
+   * @param rowColChange 
+   * @returns 
    */
-  ngAfterViewChecked() {
-    console.debug('ngAfterViewChecked');
-    let dims = this.fitAddon.proposeDimensions();
-    if(dims === undefined || isNaN(dims.rows) || dims.rows == Infinity || isNaN(dims.cols) || dims.cols == Infinity){
-      this.term.resize(10, 10);
-    }else if(!this.displayOption.fixedGrid){
-      this.fitAddon.fit();
-      let dim = this.getDimensionsAheadOfRendering();
-      console.debug(dim);
-      this.setOuterDimensions(undefined, undefined, dim.width+5, dim.height+5);
-    }else{
-      this.term.resize(this.displayOption.fixedGrid.cols, this.displayOption.fixedGrid.rows);
-      let xtermScreen = this.term.element.getElementsByClassName('xterm-screen')[0];
-      let scrollArea = this.term.element.getElementsByClassName('xterm-scroll-area')[0];
-      let terminal = this.term.element;
-      const contentWidth = xtermScreen.clientWidth;
-      const scrollWidth = terminal.clientWidth - scrollArea.clientWidth;
-      this.setOuterDimensions(undefined, undefined, contentWidth + scrollWidth, undefined);
+  private coordinateOuterAndTerminal(rowColChange: boolean) {
+    if (!rowColChange) {
+      this.outerStyle = { ...this.preOuterStyle };
+      this.applyOuterStyleToElement();
     }
+    // apply border width
+    if (this._draggable)
+      this.renderer.addClass(this.terminalDiv.nativeElement, 'draggable');
+    else
+      this.renderer.removeClass(this.terminalDiv.nativeElement, 'draggable');
+
+    if (rowColChange) {
+      this.term.resize(this._cols ?? this.term.cols, this._rows ?? this.term.rows); //asynchrous operation
+    } else {
+      this.fitAddon.fit(); //asynchrous operation
+    }
+    console.debug('finished fit()');
+
+    setTimeout(() => {
+      let dim = this.getDimensionsAheadOfRendering();
+      if (dim) {
+        this.outerStyle = { ...this.outerStyle, left: undefined, right: undefined, width: `${dim.width}px`, height: `${dim.height}px` };
+        let xtermScreen = this.term.element.getElementsByClassName('xterm-screen')[0];
+        let xtermViewport = this.term.element.getElementsByClassName('xterm-viewport')[0];
+        // let scrollArea = this.term.element.getElementsByClassName('xterm-scroll-area')[0];
+        // let terminal = this.term.element;
+        const terminalWidth = xtermScreen.clientWidth;
+        const terminalHeight = xtermScreen.clientHeight;
+        const borderWidth = this.terminalDiv.nativeElement ? parseFloat(getComputedStyle(this.terminalDiv.nativeElement).borderWidth) : 0;
+        const core = (this.underlying as any)._core;
+        const scrollWidth: number = core.viewport.scrollBarWidth as number;
+        // const scrollWidth = terminal.clientWidth - scrollArea.clientWidth;
+        // this.setOuterDimensions(undefined, undefined, terminalWidth + scrollWidth, undefined);
+        // It fixes that the viewport's width doesn't changes after calling fit()
+        this.renderer.setStyle(xtermViewport, 'width', `${terminalWidth + scrollWidth}px`);
+        this.outerStyle = {
+          ...this.outerStyle, left: undefined, right: undefined, width: `${terminalWidth + scrollWidth + borderWidth * 2}px`
+          , height: `${terminalHeight + borderWidth * 2}px`
+        };
+        this.applyOuterStyleToElement();
+      }else{
+        console.warn("NgTerminal can't fit to the outer div. Check whether the outer div is accessable.");
+      }
+    }, 50);
+    this.ref.markForCheck();
   }
   /**
    * clean all resources
    */
   ngOnDestroy(): void {
-    if(this.keyInputSubjectSubscription)
+    if (this.keyInputSubjectSubscription)
       this.keyInputSubjectSubscription.unsubscribe();
-    if(this.dataSourceSubscription)
+    if (this.dataSourceSubscription)
       this.dataSourceSubscription.unsubscribe();
-    if(this.keyEventSubjectSubscription)
+    if (this.keyEventSubjectSubscription)
       this.keyEventSubjectSubscription.unsubscribe();
-    if(this.termSnippetSubscription)
-    this.termSnippetSubscription.unsubscribe();
-    if(this.term)
+    if (this.requestRenderSubscription)
+      this.requestRenderSubscription.unsubscribe();
+    if (this.term)
       this.term.dispose();
   }
 
@@ -197,26 +270,11 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
     this.term.write(chars);
   }
 
-  setDisplayOption(opt: DisplayOption) {
-    if (opt && !equalsDisplayOption(opt, this.displayOption)) {
-      if (opt.fixedGrid != null) {
-        console.debug("resizable will be ignored.");
-        this.setOuterBlock(false);
-        this.removeOuterDimensions();
-      } else {
-        this.setOuterBlock(true);
-      }
-      this.displayOption = opt;
-      this.ref.markForCheck();
-    } else
-      console.warn(`This option can't be applied.`);
-  }
-
   get keyInput(): Observable<string> {
     return this.keyInputSubject;
   }
 
-  get keyEventInput(): Observable<{key: string; domEvent: KeyboardEvent;}> {
+  get keyEventInput(): Observable<{ key: string; domEvent: KeyboardEvent; }> {
     return this.keyEventSubject;
   }
 
@@ -225,7 +283,8 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
   }
 
   get isDraggableOnEdgeActivated() {
-    return this.displayOption.activateDraggableOnEdge != undefined && this.displayOption.fixedGrid == undefined;
+    // return this.displayOption.activateDraggableOnEdge != undefined && this.displayOption.fixedGrid == undefined;
+    return this._draggable;
   }
 
   /**
@@ -245,11 +304,11 @@ export class NgTerminalComponent implements OnInit, AfterViewInit, AfterViewChec
    */
   validatorFactory(): (re: ResizeEvent) => boolean {
     const comp = this;
-    return (re: ResizeEvent) =>{ 
-      const displayOption = comp.displayOption;
-      if(displayOption.activateDraggableOnEdge){
+    return (re: ResizeEvent) => {
+      // const displayOption = comp.displayOption;
+      if (this._draggable) {
         let left = re.rectangle.left, top = re.rectangle.top, width = re.rectangle.width, height = re.rectangle.height;
-        if ((width < displayOption.activateDraggableOnEdge.minWidth) || (height < displayOption.activateDraggableOnEdge.minHeight)) {
+        if ((width < (this._minWidth ?? 100)) || (height < (this._minHeight ?? 50))) {
           return false;
         } else return true;
       }
diff --git a/projects/ng-terminal/src/lib/ng-terminal.ts b/projects/ng-terminal/src/lib/ng-terminal.ts
index ee3379f..48fa350 100644
--- a/projects/ng-terminal/src/lib/ng-terminal.ts
+++ b/projects/ng-terminal/src/lib/ng-terminal.ts
@@ -1,6 +1,6 @@
 import { Subscription, Observable } from 'rxjs';
 import { Terminal } from 'xterm';
-import { DisplayOption } from './display-option';
+// import { DisplayOption } from './display-option';
 
 export interface NgTerminal {
     /**
@@ -28,7 +28,8 @@ export interface NgTerminal {
     /**
      * change row, col, draggable
      */
-    setDisplayOption(opt: DisplayOption): void
-    
+    setDraggable(draggable: boolean): void;
+    setRows(rows: number): void;
+    setCols(cols: number): void;
     setStyle(styleObject: any): void;
 }
diff --git a/projects/ng-terminal/src/public-api.ts b/projects/ng-terminal/src/public-api.ts
index 44e22c0..681be78 100644
--- a/projects/ng-terminal/src/public-api.ts
+++ b/projects/ng-terminal/src/public-api.ts
@@ -7,4 +7,4 @@ export * from './lib/ng-terminal.component';
 export * from './lib/ng-terminal.module';
 export * from './lib/functions-using-csi';
 export * from './lib/ng-terminal';
-export * from './lib/display-option';
\ No newline at end of file
+// export * from './lib/display-option';
\ No newline at end of file
diff --git a/projects/ng-terminal/src/test.ts b/projects/ng-terminal/src/test.ts
index e11ff1c..303b32a 100644
--- a/projects/ng-terminal/src/test.ts
+++ b/projects/ng-terminal/src/test.ts
@@ -1,6 +1,5 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
@@ -9,7 +8,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
diff --git a/projects/ng-terminal/tsconfig.lib.json b/projects/ng-terminal/tsconfig.lib.json
index 3463674..6e06ad5 100644
--- a/projects/ng-terminal/tsconfig.lib.json
+++ b/projects/ng-terminal/tsconfig.lib.json
@@ -1,22 +1,21 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",
     "declaration": true,
+    "declarationMap": true,
     "inlineSources": true,
     "types": [],
     "lib": [
       "dom",
       "es2018"
-    ],
+    ]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
     "enableResourceInlining": true
   },
   "exclude": [
diff --git a/projects/ng-terminal/tsconfig.lib.prod.json b/projects/ng-terminal/tsconfig.lib.prod.json
new file mode 100644
index 0000000..5615c27
--- /dev/null
+++ b/projects/ng-terminal/tsconfig.lib.prod.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/projects/ng-terminal/tsconfig.spec.json b/projects/ng-terminal/tsconfig.spec.json
index 16da33d..715dd0a 100644
--- a/projects/ng-terminal/tsconfig.spec.json
+++ b/projects/ng-terminal/tsconfig.spec.json
@@ -1,10 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": [
-      "jasmine",
-      "node"
+      "jasmine"
     ]
   },
   "files": [
diff --git a/projects/test/README.md b/projects/test/README.md
new file mode 100644
index 0000000..2f32165
--- /dev/null
+++ b/projects/test/README.md
@@ -0,0 +1,24 @@
+# Test
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.5.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project test` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project test`.
+> Note: Don't forget to add `--project test` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build test` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build test`, go to the dist folder `cd dist/test` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/projects/demo/karma.conf.js b/projects/test/karma.conf.js
similarity index 93%
rename from projects/demo/karma.conf.js
rename to projects/test/karma.conf.js
index 0b7038b..1ec615f 100644
--- a/projects/demo/karma.conf.js
+++ b/projects/test/karma.conf.js
@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/demo'),
+      dir: require('path').join(__dirname, '../../coverage/test'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
diff --git a/projects/test/ng-package.json b/projects/test/ng-package.json
new file mode 100644
index 0000000..1481293
--- /dev/null
+++ b/projects/test/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/test",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/test/package.json b/projects/test/package.json
new file mode 100644
index 0000000..28fd5c6
--- /dev/null
+++ b/projects/test/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.2.5",
+    "@angular/core": "^10.2.5"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}
\ No newline at end of file
diff --git a/projects/test/src/lib/test.component.spec.ts b/projects/test/src/lib/test.component.spec.ts
new file mode 100644
index 0000000..e0f9bcc
--- /dev/null
+++ b/projects/test/src/lib/test.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/test/src/lib/test.component.ts b/projects/test/src/lib/test.component.ts
new file mode 100644
index 0000000..763438f
--- /dev/null
+++ b/projects/test/src/lib/test.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-test',
+  template: `
+    <p>
+      test works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class TestComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/test/src/lib/test.module.ts b/projects/test/src/lib/test.module.ts
new file mode 100644
index 0000000..0907922
--- /dev/null
+++ b/projects/test/src/lib/test.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { TestComponent } from './test.component';
+
+
+
+@NgModule({
+  declarations: [TestComponent],
+  imports: [
+  ],
+  exports: [TestComponent]
+})
+export class TestModule { }
diff --git a/projects/test/src/lib/test.service.spec.ts b/projects/test/src/lib/test.service.spec.ts
new file mode 100644
index 0000000..7077f40
--- /dev/null
+++ b/projects/test/src/lib/test.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TestService } from './test.service';
+
+describe('TestService', () => {
+  let service: TestService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TestService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/test/src/lib/test.service.ts b/projects/test/src/lib/test.service.ts
new file mode 100644
index 0000000..4069839
--- /dev/null
+++ b/projects/test/src/lib/test.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TestService {
+
+  constructor() { }
+}
diff --git a/projects/test/src/public-api.ts b/projects/test/src/public-api.ts
new file mode 100644
index 0000000..50186f2
--- /dev/null
+++ b/projects/test/src/public-api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of test
+ */
+
+export * from './lib/test.service';
+export * from './lib/test.component';
+export * from './lib/test.module';
diff --git a/projects/test/src/test.ts b/projects/test/src/test.ts
new file mode 100644
index 0000000..303b32a
--- /dev/null
+++ b/projects/test/src/test.ts
@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/test/tsconfig.lib.json b/projects/test/tsconfig.lib.json
new file mode 100644
index 0000000..6e06ad5
--- /dev/null
+++ b/projects/test/tsconfig.lib.json
@@ -0,0 +1,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/test/tsconfig.lib.prod.json b/projects/test/tsconfig.lib.prod.json
new file mode 100644
index 0000000..5615c27
--- /dev/null
+++ b/projects/test/tsconfig.lib.prod.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/projects/test/tsconfig.spec.json b/projects/test/tsconfig.spec.json
new file mode 100644
index 0000000..715dd0a
--- /dev/null
+++ b/projects/test/tsconfig.spec.json
@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/test/tslint.json b/projects/test/tslint.json
new file mode 100644
index 0000000..124133f
--- /dev/null
+++ b/projects/test/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index df0b0fd..4cd5523 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,10 @@
       ],
       "ng-terminal/*": [
         "dist/ng-terminal/*"
+      ],
+      "test": [
+        "dist/test/test",
+        "dist/test"
       ]
     }
   },