From 01205b16b9fbc6262ab88402ca9f2bc849cef9a8 Mon Sep 17 00:00:00 2001
From: Caesar2011 <mail@sebse.de>
Date: Thu, 18 May 2017 00:09:41 +0200
Subject: [PATCH] Added Tag Input

---
 .idea/workspace.xml                           | 295 ++++++++----------
 bs-config.json                                |   3 +-
 src/app/app.component.html                    |  18 +-
 src/app/app.component.ts                      |   4 +-
 src/app/app.module.ts                         |   4 +-
 src/app/counter-input.component.ts            |   7 +-
 src/app/custom-input.component.ts             |   6 +-
 ...input.module.ts => custom-input.module.ts} |   6 +-
 src/app/tag-input.component.ts                |  88 ++++++
 9 files changed, 261 insertions(+), 170 deletions(-)
 rename src/app/{counter-input.module.ts => custom-input.module.ts} (70%)
 create mode 100644 src/app/tag-input.component.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e3d5638..1f03d57 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,20 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="6120f49a-9ac6-41db-b526-7ddb25dbd802" name="Default" comment="Cleaned up repository and removed errors">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/codeStyleSettings.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/app.component.html" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/custom-input.component.ts" />
-      <change type="MOVED" beforePath="$PROJECT_DIR$/src/app/json-input.component.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.component.ts" />
-      <change type="MOVED" beforePath="$PROJECT_DIR$/src/app/json-input.module.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.module.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.gitignore" afterPath="$PROJECT_DIR$/.gitignore" />
+    <list default="true" id="6120f49a-9ac6-41db-b526-7ddb25dbd802" name="Default" comment="Added Tag Input">
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/tag-input.component.ts" />
+      <change type="MOVED" beforePath="$PROJECT_DIR$/src/app/counter-input.module.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.module.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/bs-config.json" afterPath="$PROJECT_DIR$/bs-config.json" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.html" afterPath="$PROJECT_DIR$/src/app/app.component.html" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.ts" afterPath="$PROJECT_DIR$/src/app/app.component.ts" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.module.ts" afterPath="$PROJECT_DIR$/src/app/app.module.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/index.html" afterPath="$PROJECT_DIR$/src/index.html" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/systemjs-angular-loader.js" afterPath="$PROJECT_DIR$/src/systemjs-angular-loader.js" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/systemjs.config.js" afterPath="$PROJECT_DIR$/src/systemjs.config.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/counter-input.component.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/custom-input.component.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.component.ts" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -29,90 +25,38 @@
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="tslint.json" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/tslint.json">
+      <file leaf-file-name="tag-input.component.ts" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="340">
-              <caret line="50" column="34" lean-forward="true" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
-              <folding />
+            <state relative-caret-position="-85">
+              <caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
+              <folding>
+                <marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/index.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="206">
-              <caret line="12" column="43" lean-forward="false" selection-start-line="12" selection-start-column="43" selection-end-line="12" selection-end-column="43" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="app.component.html" pinned="false" current-in-tab="true">
+      <file leaf-file-name="app.component.html" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="20">
-              <caret line="1" column="40" lean-forward="false" selection-start-line="1" selection-start-column="40" selection-end-line="1" selection-end-column="40" />
+            <state relative-caret-position="240">
+              <caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="custom-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="135">
-              <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="app.module.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="60">
-              <caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="app.component.ts" pinned="false" current-in-tab="false">
+      <file leaf-file-name="app.component.ts" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="200">
-              <caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
+            <state relative-caret-position="180">
+              <caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="counter-input.module.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-              <folding>
-                <element signature="e#0#43#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="counter-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="440">
-              <caret line="22" column="6" lean-forward="true" selection-start-line="22" selection-start-column="6" selection-end-line="22" selection-end-column="6" />
-              <folding>
-                <element signature="e#0#54#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
     </leaf>
   </component>
   <component name="FileTemplateManagerImpl">
@@ -148,14 +92,17 @@
         <option value="$PROJECT_DIR$/src/app/json-input.module.js" />
         <option value="$PROJECT_DIR$/src/systemjs.config.extras.js" />
         <option value="$PROJECT_DIR$/src/app/json-input.component.ts" />
-        <option value="$PROJECT_DIR$/src/app/custom-input.component.ts" />
-        <option value="$PROJECT_DIR$/src/app/counter-input.component.ts" />
         <option value="$PROJECT_DIR$/.gitignore" />
         <option value="$PROJECT_DIR$/src/index.html" />
         <option value="$PROJECT_DIR$/src/systemjs-angular-loader.js" />
         <option value="$PROJECT_DIR$/src/systemjs.config.js" />
-        <option value="$PROJECT_DIR$/src/app/app.component.html" />
+        <option value="$PROJECT_DIR$/src/app/custom-input.module.ts" />
+        <option value="$PROJECT_DIR$/src/app/custom-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/counter-input.component.ts" />
+        <option value="$PROJECT_DIR$/bs-config.json" />
         <option value="$PROJECT_DIR$/src/app/app.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/tag-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.component.html" />
       </list>
     </option>
   </component>
@@ -251,6 +198,9 @@
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
   </component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/app" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$" />
       <recent name="$PROJECT_DIR$/src" />
@@ -368,7 +318,7 @@
       <workItem from="1494972860049" duration="9000" />
       <workItem from="1494972910184" duration="982000" />
       <workItem from="1495045995828" duration="627000" />
-      <workItem from="1495046636215" duration="6824000" />
+      <workItem from="1495046636215" duration="12312000" />
     </task>
     <task id="LOCAL-00001" summary="Initial commit">
       <created>1494973365190</created>
@@ -384,33 +334,39 @@
       <option name="project" value="LOCAL" />
       <updated>1494973873374</updated>
     </task>
-    <option name="localTasksCounter" value="3" />
+    <task id="LOCAL-00003" summary="Cleaned up repository and removed errors">
+      <created>1495053476965</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1495053476965</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="17264000" />
+    <option name="totallyTimeSpent" value="22752000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="1344" y="-11" width="1857" height="1092" extended-state="6" />
-    <editor active="true" />
     <layout>
-      <window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
+      <window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24945416" sideWeight="0.5" order="1" side_tool="false" content_ui="combo" />
-      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
-      <window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32881" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
+      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="12" side_tool="false" content_ui="tabs" />
+      <window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32881" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
       <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="true" content_ui="tabs" />
-      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
-      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
+      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
+      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
-      <window_info id="CSS Styles" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="11" side_tool="false" content_ui="tabs" />
+      <window_info id="CSS Styles" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
     </layout>
@@ -427,6 +383,8 @@
         <option value="$PROJECT_DIR$/src/app/app.component.js" />
         <option value="$PROJECT_DIR$/src/app/custom-input.component.js" />
         <option value="$PROJECT_DIR$/src/app/custom-input.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/tag-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/tag-input.component.js.map" />
       </list>
     </option>
   </component>
@@ -440,10 +398,13 @@
     <MESSAGE value="Initial commit" />
     <MESSAGE value="Initial commit #2" />
     <MESSAGE value="Cleaned up repository and removed errors" />
-    <option name="LAST_COMMIT_MESSAGE" value="Cleaned up repository and removed errors" />
+    <MESSAGE value="Added Tag Input" />
+    <option name="LAST_COMMIT_MESSAGE" value="Added Tag Input" />
   </component>
   <component name="XDebuggerManager">
-    <breakpoint-manager />
+    <breakpoint-manager>
+      <option name="time" value="1" />
+    </breakpoint-manager>
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
@@ -545,7 +506,7 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app/app.component.spec.ts" />
     <entry file="file://$PROJECT_DIR$/package.old.json" />
-    <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js">
+    <entry file="file://$PROJECT_DIR$/src/app/custom-input.module.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="200">
           <caret line="10" column="63" lean-forward="true" selection-start-line="10" selection-start-column="63" selection-end-line="10" selection-end-column="63" />
@@ -581,7 +542,7 @@
         <state relative-caret-position="80">
           <caret line="4" column="37" lean-forward="false" selection-start-line="4" selection-start-column="37" selection-end-line="4" selection-end-column="37" />
           <folding>
-            <element signature="e#0#75#0" expanded="true" />
+            <element signature="e#0#75#0" expanded="false" />
           </folding>
         </state>
       </provider>
@@ -610,14 +571,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/bs-config.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="200">
@@ -626,42 +579,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="440">
-          <caret line="22" column="6" lean-forward="true" selection-start-line="22" selection-start-column="6" selection-end-line="22" selection-end-column="6" />
-          <folding>
-            <element signature="e#0#54#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#43#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="135">
-          <caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/app.component.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="140">
@@ -670,18 +587,10 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="200">
-          <caret line="10" column="0" lean-forward="true" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/tslint.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="340">
-          <caret line="50" column="34" lean-forward="true" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
+        <state relative-caret-position="360">
+          <caret line="18" column="18" lean-forward="true" selection-start-line="18" selection-start-column="18" selection-end-line="18" selection-end-column="18" />
           <folding />
         </state>
       </provider>
@@ -694,10 +603,80 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/tslint.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="340">
+          <caret line="50" column="34" lean-forward="false" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="60">
+          <caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bs-config.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="140">
+          <caret line="7" column="21" lean-forward="false" selection-start-line="7" selection-start-column="21" selection-end-line="7" selection-end-column="21" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="975">
+          <caret line="49" column="0" lean-forward="true" selection-start-line="49" selection-start-column="0" selection-end-line="49" selection-end-column="0" />
+          <folding>
+            <element signature="e#0#54#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/custom-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="415">
+          <caret line="29" column="13" lean-forward="true" selection-start-line="29" selection-start-column="13" selection-end-line="29" selection-end-column="13" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/custom-input.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="380">
+          <caret line="19" column="12" lean-forward="false" selection-start-line="19" selection-start-column="12" selection-end-line="19" selection-end-column="12" />
+          <folding>
+            <element signature="e#0#43#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="-85">
+          <caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
+          <folding>
+            <marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="20">
-          <caret line="1" column="40" lean-forward="false" selection-start-line="1" selection-start-column="40" selection-end-line="1" selection-end-column="40" />
+        <state relative-caret-position="240">
+          <caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="180">
+          <caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
           <folding />
         </state>
       </provider>
diff --git a/bs-config.json b/bs-config.json
index 4e58595..d9d90cc 100644
--- a/bs-config.json
+++ b/bs-config.json
@@ -4,5 +4,6 @@
     "routes": {
       "/node_modules": "node_modules"
     }
-  }
+  },
+  "reloadDebounce": 2000
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a0b7132..ab449e9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,18 @@
-<form #form="ngForm">
-    <counter-input [(ngModel)]="result" name="res"></counter-input>
+<form #formCounter="ngForm">
+    <counter-input [(ngModel)]="resultCounter" name="res"></counter-input>
 </form>
 
 <p>Value:</p>
-<pre>{{ result }}</pre>
\ No newline at end of file
+<pre>{{ resultCounter }}</pre>
+
+
+<hr>
+
+<form #formTag="ngForm">
+    <tag-input [(ngModel)]="resultTag" name="res" [id]="'a'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}"></tag-input>
+    <tag-input [(ngModel)]="resultTag2" name="res2" [id]="'b'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}" [nullable]="true"></tag-input>
+</form>
+
+<p>Value:</p>
+<pre>{{ resultTag | json }}</pre>
+<pre>{{ resultTag2 | json }}</pre>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7da5e04..de0af4d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
 })
 
 export class AppComponent  {
-  public result = 10;
+  public resultCounter = 10;
+  public resultTag = {"alpha": true, "beta": false};
+  public resultTag2 = {"alpha": true, "beta": false};
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0a88eb5..39b7cad 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
-import {JsonInputModule} from "./counter-input.module";
+import {CustomInputModule} from "./custom-input.module";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 
 @NgModule({
@@ -10,7 +10,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
-    JsonInputModule,
+    CustomInputModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
diff --git a/src/app/counter-input.component.ts b/src/app/counter-input.component.ts
index 5deb73e..5fd0d80 100644
--- a/src/app/counter-input.component.ts
+++ b/src/app/counter-input.component.ts
@@ -45,6 +45,11 @@ export class CounterInputComponent extends CustomInputComponent {
     this.value = this.value + number;
     this.parseError = isNaN(this.value);
 
-    super.onChange(number);
+    super.change();
+  }
+
+  // on touched
+  protected onBlur(): void {
+    super.blur();
   }
 }
\ No newline at end of file
diff --git a/src/app/custom-input.component.ts b/src/app/custom-input.component.ts
index cea0a40..1a2f61b 100644
--- a/src/app/custom-input.component.ts
+++ b/src/app/custom-input.component.ts
@@ -1,7 +1,7 @@
 import {ControlValueAccessor, FormControl, ValidationErrors, Validator} from '@angular/forms';
 
 export abstract class CustomInputComponent implements ControlValueAccessor, Validator {
-  protected value: number;
+  protected value: any;
   protected parseError: boolean;
   private propagateChange: (_: any) => void = () => {};
   private propagateTouch: () => void = () => {};
@@ -23,12 +23,12 @@ export abstract class CustomInputComponent implements ControlValueAccessor, Vali
   public abstract validate(c: FormControl): ValidationErrors;
 
   // on change
-  protected onChange(value: any): void {
+  protected change(): void {
     this.propagateChange(this.value);
   }
 
   // on touch
-  protected onBlur(): void {
+  protected blur(): void {
     this.propagateTouch();
   }
 }
\ No newline at end of file
diff --git a/src/app/counter-input.module.ts b/src/app/custom-input.module.ts
similarity index 70%
rename from src/app/counter-input.module.ts
rename to src/app/custom-input.module.ts
index e157eea..b31eaf6 100644
--- a/src/app/counter-input.module.ts
+++ b/src/app/custom-input.module.ts
@@ -2,6 +2,7 @@ import {FormsModule} from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { CounterInputComponent }   from './counter-input.component';
+import {KeysPipe, TagInputComponent} from './tag-input.component';
 
 
 @NgModule({
@@ -11,10 +12,13 @@ import { CounterInputComponent }   from './counter-input.component';
   ],
   exports: [
     CounterInputComponent,
+    TagInputComponent,
   ],
   declarations: [
     CounterInputComponent,
+    TagInputComponent,
+    KeysPipe
   ],
   providers: [],
 })
-export class JsonInputModule { }
+export class CustomInputModule { }
diff --git a/src/app/tag-input.component.ts b/src/app/tag-input.component.ts
new file mode 100644
index 0000000..5f7ed4d
--- /dev/null
+++ b/src/app/tag-input.component.ts
@@ -0,0 +1,88 @@
+import {Component, forwardRef, Input, Pipe, PipeTransform} from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+
+@Pipe({name: 'keys'})
+export class KeysPipe implements PipeTransform {
+  transform(value: Object, args:string[]) : any {
+    let keys = [];
+    for (let key in value) {
+      keys.push({key: key, value: value[key]});
+    }
+    return keys;
+  }
+}
+
+@Component({
+  selector: 'tag-input',
+  template:
+      `
+      <div *ngFor="let entry of value | keys" (click)="onChange(entry.key, true)" (contextmenu)="onChange(entry.key, false)">
+          {{items[entry.key]}}: {{entry.value}}
+      </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true,
+    }]
+})
+export class TagInputComponent extends CustomInputComponent {
+  @Input() items: Array<{key: string, value: string}> = [];
+  @Input() nullable: boolean = false;
+  @Input() id: string = "";
+
+  // set initial value
+  public writeValue(obj: any): void {
+    let isUpdated = false;
+    this.value = {};
+    if (!obj) {
+      obj = {};
+    }
+    for (let key in this.items) {
+      if (this.items.hasOwnProperty(key)) {
+        if (obj.hasOwnProperty(key) && (typeof(obj[key]) === "boolean" || (this.nullable && null===obj[key])))
+          this.value[key] = obj[key];
+        else {
+          isUpdated = true;
+          this.value[key] = (this.nullable ? null : false);
+        }
+      }
+    }
+
+    console.log(this.id, isUpdated, this.value);
+    if (isUpdated) {
+      super.change();
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    return null;
+  }
+
+  // on button click
+  protected onChange(key: string, forward: boolean): boolean {
+    let value = this.value[key];
+    if (!this.nullable)
+      value = !value;
+    else if (value===null)
+      value = forward;
+    else if ((value ? !forward : forward))
+      value = null;
+    else
+      value = !value;
+
+    this.value = Object.assign({}, this.value);
+    this.value[key] = value;
+
+    super.change();
+    return false;
+  }
+}
\ No newline at end of file