@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

@ViewChildren in between components to Components

child.components.ts

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

@Component({

selector: 'app-child',

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

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

})

export class ChildComponent implements OnInit {

public var_one:string;
public var_two:string;

constructor() {

this.var_one="This is coming from Child Component";

this.var_two="Text Coming from Child Component."
}

ngOnInit() { }

}

child.component.html

<h1>{{var_one}}</h1>

<h1 style="color: brown">{{var_two}}</h1>

parent.components.html

<app-child></app-child>

<app-child></app-child>

<app-child></app-child>

<app-child></app-child>

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

parent.components.ts

import { Component, OnInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({

selector: 'app-parent',

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

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

})

export class ParentComponent implements OnInit {

// @ViewChild(ChildComponent)

// private _child:ChildComponent;

@ViewChildren(ChildComponent)

private _child:QueryList<ChildComponent>=new QueryList;
private my_array:Array<any>;

constructor() { }

ngOnInit() {

}

public clickMe():any{

// this._child.var_one = "Message from Parent Component";

// this._child.var_two = "Marquee coming from Parent Component"

// this.my_array[0].var_one="Hello One";

//this.my_array[0].var_two="Hi....1";

// this.my_array[1].var_one="Hello Two";

//this.my_array[1].var_two="Hi...2";

for(var i:number=0; i<this.my_array.length;i++){

this.my_array[i].var_one="Hello World";

this.my_array[i].var_two="Hi....";

}

}

ngAfterViewInit(){

this.my_array=this._child.toArray();

}

}

Out Put

after click button   output