Angular 5 Pass data on click event from parent component to child component on button clicked at parent component - angular5

Question

i have some data bind in table and on click of any specific i want to show current clicked object more related data in to another component(child component)
for example the data I'm taking from this link:
http://jsonplaceholder.typicode.com/users
HTML Code:
<table>
<thead>
<th>
Id
</th>
<th>
name
</th>
<th>
username
</th>
<th>
email
</th>
<th>
street
</th>
<th>
suite
</th>
<th>
zipcode
</th>
<th>
phone
</th>
<th>
website
</th>
</thead>
<tbody>
<tr *ngFor="let data of httpdata">
<td>{{data.id}}
</td>
<td>{{data.name}}
</td>
<td>{{data.username}}
</td>
<td>{{data.email}}
</td>
<td>{{data.address.street}}
</td>
<td>{{data.address.city}}
</td>
<td>{{data.address.suite}}
</td>
<td>{{data.address.zipcode}}
</td>
<td>{{data.phone}}
</td>
<td>{{data.website}}
</td>
<td>
<a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to
</a>
</td>
</tr>
</tbody>
</table>
if you see there is one go to button i have in table when i click on any specific data it should show me complete info about current clicked
but in my case i want to bind the data in another component when i click on go to for specific that all td data should be display in new component(child).
simple i want to track click event for selected data in child component . and the table is rendered in parent component.
attached is the data table I have.

Answer 1

You can use the #Input and #Output decorator to achieve the required output:
Changes:
In parent Component:
HTML Code:
<div>
<table *ngIf="isVisible === true">
<tr>
<th>
Id
</th>
<th>
name
</th>
<th>
username
</th>
<th>
email
</th>
</tr>
<tr *ngFor="let data of userInformation">
<td>{{data.id}}
</td>
<td>{{data.name}}
</td>
<td>{{data.username}}
</td>
<td>{{data.email}}
</td>
<td>
<a (click)="onSelect(data)">Go to
</a>
</td>
</tr>
</table>
<div *ngIf="isVisible === false">
<app-test-child [userInfo]="clickedUser" (notify)="backToList($event)"></app-test-child>
</div>
</div>
TS Code:
Local variables:
userInformation: any;
isVisible : boolean = true;
clickedUser: any;
Two functions in the parent component:
onSelect(data)
{
this.isVisible = false;
this.clickedUser = data;
}
backToList(flag) {
this.isVisible = flag;
console.log(flag)
}
In Child Component:
HTML code:
<table>
<tr>
<th>
Id
</th>
<th>
name
</th>
<th>
username
</th>
<th>
email
</th>
</tr>
<tr>
<td>{{clickedUser.id}}
</td>
<td>{{clickedUser.name}}
</td>
<td>{{clickedUser.username}}
</td>
<td>{{clickedUser.email}}
</td>
<td>
<a (click)="backToList()">Back
</a>
</td>
</tr>
</table>
TS Code:
import { Component, OnInit, Input, EventEmitter, Output } from '#angular/core';
#Input() userInfo: any;
#Output() notify: EventEmitter<any> = new EventEmitter<any>();
clickedUser: any;
constructor() { }
ngOnInit() {
this.clickedUser = this.userInfo;
}
backToList() {
var flag = true;
this.notify.emit(flag);
}

Answer 2

try this
In HTML
update
<a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to
</a>
to
<a (click)="onSelect(data)">Go to
</a>
In Parent Component
import { Router } from '#angular/router';
export class ParentComponent implements OnInit {
constructor(private router: Router) {
}
onSelect(data) {
this.router.config.find(r => r.component == ChildComponent).data = data;
this.router.navigate(["/conflict-details/conflict"]);
}
}
In Child Component
import { ActivatedRoute } from '#angular/router';
export class ChildComponent implements OnInit {
SentItem : any;
constructor(private router: ActivatedRoute) { }
ngOnInit() {
this.router.data.subscribe(r=>this.SentItem =r);
}
}