How to pass a string parameter from angular UI to node js backend

Question

I try to take the input in enteredValue and pass it on to http.get call as params:this.enteredValue and to node.js as req.params,as you can see below if I hardcode the string value for "orgChange",it works fine but somehow passing params is not working and throwing errors?any guidance on how to fix this?

html:

<textarea rows="6" [(ngModel)]="enteredValue"></textarea>
<hr>
<button (click)="get_change_lifecycle_data()">Search</button>

<p>{{newPost | json }}</p>

component

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-change-input',
  templateUrl: './change-input.component.html',
  styleUrls: ['./change-input.component.css']
})


export class ChangeInputComponent  {

constructor(private http: HttpClient) {}

enteredValue : any;
newPost : any;
get_change_lifecycle_data(){
     this.http.get('http://localhost:3000/api/change_life_cycle2',{params:this.enteredValue}).subscribe(response => {
     console.log(response);
      this.newPost = response
      });
}

}

Answer 1

Hello Kartik,

There are three ways to get parameters to express:

1. req.query --> this case, query parameters
2. req.body --> post request body payload
3. req.params --> /:someParam in url params

It should be req.query.searchKey.

Change the query to like this: u need to pass different params with different names:

this.http.get('http://localhost:3000/api/change_life_cycle2', 
  {
    params:{
    searchKey: this.enteredValue
    }
  }).subscribe(response => {
    console.log(response);
    this.newPost = response
});

In API side read the params in the request like this:

app.get("/api/change_life_cycle2", (req, res, next) => {
    console.log(req.body)
     Change_life_cycle.find({ orgChange: req.query.searchKey }).then(documents => {
        res.status(200).json({
          message: "Posts fetched successfully!",
          posts: documents
        });
      });
    });

Hope it helps!!

To know more about Angular, Join best Angular certification course today.

Thank you!!