@ViewChild in between components to Components

child.components.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

  @Input('_id') p_id;

  @Input('_name') p_name;

  @Input('_cost') p_cost;

  // @Input() p_id;

  // @Input() p_name;

  // @Input() p_cost;

  @Output() sendData: EventEmitter<any>=new EventEmitter();

  constructor() { }

  ngOnInit() {

  }

public clickMe(){

   this.sendData.emit(this.p_id+"..."+this.p_name+"..."+this.p_cost);

  //alert(this.p_id+"..."+this.p_name+"..."+this.p_cost)

}

 } 

 child.component.html

<h2>Product id : <span style="color: brown">{{p_id}}</span></h2>

<h2>Product Name : <span style="color: brown">{{p_name}}</span></h2>

<h2>Product Cost : <span style="color: brown">{{p_cost}}</span></h2>

<button (click)="clickMe()">Click Me Button</button>

<hr>

parent.components.ts

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-parent',

  templateUrl: './parent.component.html',

  styleUrls: ['./parent.component.css']

})

export class ParentComponent implements OnInit {

private products:Array<any>;

  constructor() {

   this.products=[{p_id:111, p_name:"p_one", p_cost:1000},

                {p_id:222, p_name:"p_two", p_cost:2000},

                {p_id:333, p_name:"p_three", p_cost:3000},

                {p_id:444, p_name:"p_four", p_cost:4000},

                {p_id:555, p_name:"p_five", p_cost:5000}]

  }

  ngOnInit() {

  }

  public clickMe(data){

    alert(data)

  }

}

parent.components.html

<!-- <app-child

[p_id]="x.p_id"

[p_name]="x.p_name"

[p_cost]="x.p_cost"

(sendData)="clickMe($event)"

*ngFor="let x of products"></app-child> -->

<app-child

[_id]="x.p_id"

[_name]="x.p_name"

[_cost]="x.p_cost"

(sendData)="clickMe($event)"

*ngFor="let x of products"></app-child>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ChildComponent } from './components/child/child.component';

import { ParentComponent } from './components/parent/parent.component';

@NgModule({

  declarations: [

    AppComponent,

    ChildComponent,

    ParentComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [ParentComponent]

})

export class AppModule { }

Output

button click