title: How to pass data from component to controller?
body: <p>Pass a string variable from the front end (HTML/.ts to C# controller).</p>
  
  <p>I'm skimming through angular.io documentation and walkthroughs made by unofficial people. I watched videos and it appears none of it is relevant to my code. I started a new project(ASP.NET Core web application with Angular) in Visual Studio 2019. There are .ts components and .cs controllers. My HTML is set up to take a string input. I have tried using HTTP POST request and ajax requests. I may have done them incorrectly with the wrong arguments. I've consulted </p>
  
  <p><a href="https://stackoverflow.com/questions/36919159/how-to-send-data-to-an-asp-net-controller-with-angular2">How to send data to an ASP.NET Controller with Angular2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/20333021/asp-net-mvc-how-to-pass-data-from-view-to-controller">ASP.Net MVC How to pass data from view to controller</a></p>
  
  <p><a href="https://stackoverflow.com/questions/43495717/passing-model-data-from-view-to-controller-and-using-its-values">Passing Model data from View to Controller and using its values</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27205008/angularjs-asp-net-mvc-passing-data-to-controller">AngularJS &amp; asp.net MVC - passing data to controller?</a></p>
  
  <p>and countless others not on StackOverflow.</p>
  
  <p>.html</p>
  
  <pre><code>&lt;input #box (keyup)="onKey(box.value)"&gt;
  Your name is: {{name}}
  </code></pre>
  
  <p>.ts</p>
  
  <pre><code>onKey(value: string)
  {
      this.name = value;
  }
  </code></pre>
  
  <p>I expect the name string to be available in the controller where I can print it out and later use it in a database.</p>