ng-model binding example

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApplication">
  <h1>AngularJs Input Example</h1>
  <p>This is to demonstrate <a _target="blank" href="https://stackoverflow.com/questions/49103988/chrome-app-ng-model-not-updating-with-touchscreen-keyboard">this stackoverflow question</a></p>

  <main-component></main-component>

</body>

</html>

var app = angular.module("myApplication", []);


app.component("mainComponent", {
       templateUrl: "./main.component.html",
       bindings: {
         "textValue": "<",
         "backgroundColor": "<"
       }
  });

/* Styles go here */
input {
  font-size:16pt;
  
}


#outputValue {
  font-size:36pt; font-weight:bold;
}

Enter text here:

<input type="text" ng-model="$ctrl.textValue" ng-model-options="{ updateOn: 'keyup keydown default blur click touch touchup touchdown' }" />


<br /><br /><br />

The value: <br />

<div id="outputValue">{{ $ctrl.textValue }}</div>