Writing user input from angular 4 to mysql through node.js - mysql

Question

What i'm trying to achieve is to send user input from a textbox, send that data to node.js after the enter button is clicked, which then writes that value into my specified mysql table. I just need to be able to post into the database not read back. At this point I just want the user to be able to enter 1 value (so page doesn't have to go back to allow user to enter more then 1 value). Thank you in advance.
Hero-form.component.html
<div class="container">
<div [hidden]="submitted">
<h1>Hero Form</h1>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
</div>
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
</form>
</div>
<div [hidden]="!submitted">
<h2>You submitted the following:</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">{{ model.name }}</div>
</div>
<br>
<button class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>
</div>
Hero-form.component.ts
import { Component, OnInit } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Hero } from '../recipe';
import { Observable } from 'rxjs/Observable';
import { catchError, map, tap } from 'rxjs/operators';
#Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent implements OnInit {
private heroesUrl = 'http://localhost:8081';
constructor(private http: HttpClient) { }
ngOnInit() {
}
powers = ['Really Smart', 'Super Flexible',
'Super Hot', 'Weather Changer'];
model = new Hero(18, 'Dr IQ');
submitted = false;
onSubmit(hero: Hero): Observable<Hero>{
return this.http.post<Hero>(this.heroesUrl, hero)
}
/*onSubmit(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
catchError(this.handleError<Hero>('addHero'))
);
}*/
newHero() {
this.model = new Hero(42, '');
}
}
App.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
declarations: [
AppComponent,
HeroFormComponent
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
database.js
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
//app.use(express.json());
//app.use(express.urlencoded());
//app.use(app.router);
app.use(express.static('public'));
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '1234',
database : 'mydb'
});
connection.connect();
// Put
app.post('/heroes', function(req, res){
// console.log('read after this');
connection.query("INSERT INTO heroes (herolist) VALUES ?", function(err, result){
console.log(res);
if(err) {
// console.log("Error in database for put");
} else {
// console.log("Added successfully");
}
})
})
app.listen(8081, function () {
console.log('Example app listening on port 8081');
});