How to pass the data from one component to another component using angular5 - node.js

Question

I am creating test application using angular so in that i need to display user details while i click on edit button then, that user details will need to display in another component.i have written query to get user details while clicking edit button, but unable to get data so what is the exact procedure for changes need to be done in query.
This is my manageusers.component.html
<tr *ngFor="let detail of userDetails" style="text-align:center">
<td><input type="checkbox"></td>
<td>{{detail.username}}</td>
<td>{{detail.uemail}}</td>
<td>Inactive</td>
<td>{{detail.added_on}}</td>
<td>
<a routerLink="/dashboard-info/basic-settings">
<i class="fas fa-edit" (click)="editIssue(i,detail._id)"></i>
</a>
This is my manageusers.component.ts
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup , Validators } from '#angular/forms';
import { DataService } from '../../../services/data.service';
import { AccountService } from '../../../services/account.service';
import { Router } from '#angular/router';
#Component({
selector: 'app-manage-users',
templateUrl: './manage-users.component.html',
styleUrls: ['./manage-users.component.css'],
})
export class ManageUsersComponent implements OnInit {
userDetails:any = [];
detail:Detail={
added_on:'',
username:'',
uemail:'',
upassword:'',
};
constructor(private router: Router,private fb:FormBuilder,private dataService: DataService, private accountService: AccountService) {}
editIssue(id,detail){
alert(detail);
let data = {
_id:detail,
};
this.accountService.editDetail(data).subscribe(
response => {
console.log(response);
this.userDetails = JSON.parse(response);
//this.router.navigate(['/dashboard-info/basic-settings', this.userDetails]);
},
err => {
console.error('User Not found');
})
}
ngOnInit() {}
}
interface Detail{
added_on:string
username:string,
upassword:string,
uemail:string,
}
accountService.ts
editDetail(data) {//Getting User with userId
return this.http.post(this.apiPath + 'user/editDetail', data,{responseType: 'text'});
}
usercontroller.js
userRouter.post('/editDetail', function (req, res) {
console.log(req.body._id);
Collections.user.findOne({_id: req.body._id}, function (err, result) {
if (err) return res.status(500).send("There was a problem finding the user");
if (result) {
console.log(result);
res.status(200).send(result);
} else {
return res.status(500).send("User Not Found with Details: " + JSON.stringify(user));
}
});
});

Answer 1

I think it would be better to set the User you want to show in the component as input, get the User you need in an http call and pass it to the component afterwards by it's input. See more for component input here: https://toddmotto.com/passing-data-angular-2-components-input
To retrieve data by http call you should use Angulars Http Client, which is really easy to use and saves you from using plain javascript. See here: https://blog.angular-university.io/angular-http/