How to transfer data from Angular to Node.js?

Question

I want to build a comment section in my Angular App. These comments are supposed to be stored in a database, so I want to forward the data from Angular to Node.js, where it can be passed on to the database. So I created an input field for comments in detail.component.html. The comment is saved when the user hits enter.

<input #box (keyup.enter)="update(box.value)">
<p>{{value}}</p>

In detail.component.ts I save the comment in a variable:

public value: any= []
update(comment: any) { this.value = comment; }
//code
this.dataService.addComment().subscribe(comment => this.value = comment)

Here is the first problem - how do I get the comment to data.service.ts?

//code
addComment() {}

And then there is the actual question: How can I forward this comment to server.js in the node.js App?

I am quite new to Angular, so I am pretty clueless of how to achive this. I found this question How to pass form data from angular to nodejs samewhat useful, but could not apply it to my usecase. So how can I transfer the data from Angular to Node.js?

@SiddharthPal - yes the API is created by the server.js (nodejs) — user11962606
– user11962606, Commented Dec 17, 2019 at 15:03

Siddharth Pal · Accepted Answer · 2019-12-17 15:17:06Z

0

If you have already defined API(POST) on the server-side then you just need to call the http.post method like below:

  addComment(title: string) {
    const postData = new FormData();
    postData.append('title', title);
    return this.http
      .post<{ title: string; }>(
        '<HOST_NAME>/api/comments',
        postData
      )
  }

and to use it you have to subscribe it as Observables are lazy as below:

this.dataService.addComment(this.value).subscribe(console.log);

edited Dec 17, 2019 at 15:17

answered Dec 17, 2019 at 15:09

Siddharth Pal

1,45811 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user11962606 Over a year ago

I get this error message: Property 'subscribe' does not exist on type 'void'.for "subscribe" in "detail.component.ts"

Siddharth Pal Over a year ago

sorry my bad I forgot to return the Observable..Updated my answer. Please check now

user11962606 Over a year ago

In console.log I get this error message: "myhostname/api/comments 404 (Not Found)" ("cannot POST") - Do I have to somehow create this page to be able to post something there? I have in Node.js in server.js something like "app.get('/api/comments', function, req, res, next) {/*code*/}

Siddharth Pal Over a year ago

I am not sure then you should check your api first from postman or some other client. You said that you are able to get data from api so I assume your proxy setup is correct.

Siddharth Pal Over a year ago

gotcha in your server side the api should be of POST verb not GET. app.post('/api/comments', function, req, res, next) {/*code*/}

|

Maihan Nijat · Accepted Answer · 2019-12-17 15:10:13Z

0

Here is the first problem - how do I get the comment to data.service.ts?

As you stated in the question that you are saving comment to a variable value. Pass the value variable to the service:

this.dataService.addComment(this.value).subscribe(res => {
  // check fo response, and maybe chain errors
});

And then there is the actual question: How can I forward this comment to server.js in the node.js App?

In the Data Service:

constructor(private http: HttpClient) {
}

addComment(comment) {
  return this.http.post<any>('server-url-route', comment);
}

in the Node Js:

Have a route for adding a comment and a function to save the comment to the database.

edited Dec 17, 2019 at 15:10

answered Dec 17, 2019 at 15:03

Maihan Nijat

9,36313 gold badges69 silver badges117 bronze badges

3 Comments

user11962606 Over a year ago

I get this error message: Property 'subscribe' does not exist on type 'void'.for "subscribe" in "detail.component.ts"

Maihan Nijat Over a year ago

@butterfly you have to use addComment(comment) { return this.http.post<any>('server-url-route', comment); } in the Data Service.

user11962606 Over a year ago

In console.log I get this error message: "myhostname/api/comments 404 (Not Found)" ("cannot POST") - Do I have to somehow create this page to be able to post something there? I have in Node.js in server.js something like "app.get('/api/comments', function, req, res, next) {/*code*/}

Collectives™ on Stack Overflow

How to transfer data from Angular to Node.js?

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related