title: How can I use ng-model to use the value of input field in Angular TypeScript?
body: <p>I am trying to make a simple calculator to get the values of input fields and use it on the same page but ng-model doesn't output value of input field. </p>
  
  <p>I tried the same code on JsFiddle and it works fine but I am not sure why it doesn't work on the application.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="panel panel-default" ng-app=""&gt;
  &lt;form class="form-group panel-body"&gt;
    &lt;input ng-model="totalitems"  type="number"&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;h2 class="label-default"&gt;{{totalitems}}&lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>import { Component, Input, EventEmitter} from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    title = 'Product Cost Calculator';
  
  }
  </code></pre>
  
  <p>My application name is "calc" and I use <code>ng-app="calc"</code> on the body tag.</p>