title: Passing HTML variables to Angular Component
body: <p>I am trying to pass the items written in a text-box field on my webpage to variables in the component file. These variables will then be used in the service file that has a function link to the POST request I made on the python/SQLAlchemy side. I am using Flask with python/SQLAlchemy on the backend, and Angular CLI 7.0.5. Here's what I have:</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;div class = "container"&gt;
  &lt;input id="InsertItemName" [(ngModel)]="InsertItemName"/&gt;
  &lt;input id="InsertItemManu" [(ngModel)]="InsertItemManu"/&gt;
  &lt;input id="InsertItemType" [(ngModel)]="InsertItemType"/&gt;
  &lt;button (click)="sendValues()"&gt;Send&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>modify-page.component.html:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ActivatedRoute, Data } from '@angular/router';
  import { HttpResponse } from '@angular/common/http';
  import { SelectItem } from 'primeng/components/common/selectitem';
  import { MenuItem } from 'primeng/api';
  import { ModifyService, ItemsData } from '../modify.service'
  import { PARAMETERS } from '@angular/core/src/util/decorators';
  
  
  
  @Component({
    selector: 'app-modify-page',
    templateUrl: './modify-page.component.html',
    styleUrls: ['./modify-page.component.css']
  })
  export class ModifyPageComponent implements OnInit {
  
    InsertItemName: string;
    InsertItemManu: string;
    InsertItemType: string;
  
    insertItems: ItemsData;
  
  
    constructor(
      private modifyService: ModifyService,
      private route: ActivatedRoute
    ) {
     }
  
    ngOnInit() {
      this.insertItems.name = this.InsertItemName;
      this.insertItems.manufacture = this.InsertItemManu;
      this.insertItems.type = this.InsertItemType;
  
    }
  
  
    sendValues(): void {
      console.log(this.InsertItemName, this.InsertItemManu, this.InsertItemType)
  
      this.modifyService.postInputItems(this.insertItems)
  
  
  }
  
  
  }
  </code></pre>
  
  <p>modify.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  export interface ItemsData {
    name: string;
    manufacture: string;
    type: string;
  }
  
  @Injectable({
    providedIn: 'root'
  })
  export class ModifyService {
  
    constructor(
      public http: HttpClient
    ) { }
  
  
  postInputItems(data: ItemsData){
    return this.http.post('/modify/insertItems', data)
  }
  
  }
  </code></pre>
  
  <p>And if you need it, this is the database.py:</p>
  
  <pre><code>def insert_dbItems(a, b, c):
          with engine.connect() as con:
                  ins = Items.insert().values(name = a, manufacture = b, type = c)
                  con.execute(ins)
          return "Successfully inserted data into Items table"
  </code></pre>
  
  <p>and the <strong>init</strong>.py:</p>
  
  <pre><code>@app.route('/api/modify/insertItems', methods=["POST"])
  def insert_Itemsdb():
          body = json.loads(request.data)
          a = body['name']
          b = body['manufacture']
          c = body['type']
          return jsonify(database.insert_dbItems(a, b, c))
  </code></pre>
  
  <p>The database and init files work, I can use the Postman app and correctly insert the variables into my database from it. My problem is that when I run all the code above, I get left with this:</p>
  
  <p><a href="https://i.stack.imgur.com/jUa0l.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>In conclusion: everything here is for me to take an input from a user and insert it into my database. Any help would be fantastic, thank you!</p>