@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

Multiple Div's hide and show in angular

Multiple Div's hide and show in angular2, 4, 5 & 6

app.component.html
-------------------------

<h1> Hide and Show Function in angular 4 </h1>

<button (click)="toggle()">{{buttonName}}</button>

<button (click)="toggle2()">{{buttonName2}}</button>


<ng-container *ngIf="show">
  <div>
    <label>Name:</label>
    <input id="tbname" name="yourname" />
  </div>
  <div>
    <label>Email Address:</label>
    <br>
    <input name="email" id="email" />
  </div>
  <div>
    <label>Additional Information (optional):</label>
    <br>
    <textarea rows="5" cols="46" style="float: left;"></textarea>
  </div>
</ng-container>


<ng-container *ngIf="show2">
  <div>
    <label>Name2:</label>
    <input id="tbname" name="yourname" placeholder="Enter Name" />
  </div>
  <div>
    <label>Email Address2:</label>
    <br>
    <input name="email" id="email" placeholder="Enter Email ID"/>
  </div>
  <div>
    <label>Additional Information (optional):</label>
    <br>
    <textarea rows="5" cols="46" style="float: left;" placeholder="Enter Comments"></textarea>
  </div>
</ng-container>


app.component.ts
----------------------

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public show:boolean = false;
  public buttonName:any = 'Show';

  public show2:boolean = false;
  public buttonName2:any = 'Show2';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;
    this.show2=false;
    this.buttonName2="Show2"

    // CHANGE THE NAME OF THE BUTTON.
   
    if(this.show) 
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }

  toggle2() {
    this.show2 = !this.show2;
    this.show=false;
    this.buttonName="Show"

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show2) 
      this.buttonName2 = "Hide2";
    else
      this.buttonName2 = "Show2";
  }

}

Single Div hide and show in angular

Div hide and show in angular

app.component.html
-------------------------

<button (click)="toggle()" id="bt">
    {{buttonName}}
</button>

<ng-container *ngIf="show">
    <div style="margin: 0 auto;text-align: left;">
        <div>
            <label>Name:</label>
            <div><input id="tbname" name="yourname" /></div>
        </div>
        <div>
            <label>Email Address:</label>
            <div><input name="email" id="email" /></div></div>
        <div>
            <label>Additional Information (optional):</label>
            <div><textarea rows="5" cols="46"></textarea></div>
        </div>
    </div>
</ng-container>



app.component.ts
----------------

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public show:boolean = false;
  public buttonName:any = 'Show';

  ngOnInit () {  }

  toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if(this.show) 
      this.buttonName = "Hide";
    else
      this.buttonName = "Show";
  }
}