angular-parent-child-communication-viewchild.md

Code Examples for my Blog Post: Angular Child to Parent Communication with @ViewChild()

The full Github repo can be found here: https://github.com/kevinchisholm/video-code-examples/tree/master/angular/components/ViewChild

child1.component.ts

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

@Component({
selector: 'child1',
  templateUrl: 'src/child1/child1.html',
})
export class Child1Component {
  userInfo: any = {
    name: '',
    phone: ''
  };
}

child1.html

<label>User Name</label>
<input
type="text"
[(ngModel)]="userInfo.name"
placeholder="Enter user name here">

<label>User Phone Number</label>
<input
type="text"
[(ngModel)]="userInfo.phone"
placeholder="Enter user phone number here">

child2.component.ts

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

@Component({
  selector: 'child2',
  templateUrl: 'src/child2/child2.html'
})
export class Child2Component {
  userInfo: any = {
    name: '',
    phone: ''
  };
}

child2.html

<label>User Name</label>
<input
type="text"
[(ngModel)]="userInfo.name"
placeholder="Enter user name here">

<label>User Phone Number</label>
<input
type="text"
[(ngModel)]="userInfo.phone"
placeholder="Enter user phone number here">

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import {Child1Component} from '../child1/child1.component'
import {Child2Component} from '../child2/child2.component'

@Component({
  selector: 'parent',
  templateUrl: 'src/parent/parent.html'
})
export class ParentComponent {
  @ViewChild(Child1Component) child1: Child1Component;
  @ViewChild(Child2Component) child2: Child1Component;

  userInfo1: any = {
    name: '',
    phone: ''
  };

  userInfo2: any = {
    name: '',
    phone: ''
  };

  ngAfterViewInit() {
    this.userInfo1 = this.child1.userInfo;
    this.userInfo2 = this.child2.userInfo;
  }
}

parent.html

<h2>Data From Child 1</h2>
<strong>Name: </strong>  {{userInfo1.name}}
<strong>Phone: </strong>  {{userInfo1.phone}}

<h2>Data From Child 2</h2>
<strong>Name: </strong>  {{userInfo2.name}}
<strong>Phone: </strong>  {{userInfo2.phone}}

<child1></child1>
<child2></child2>