angular-child-parent-communication-output.md

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

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

child1.component.ts

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

@Component({
  selector: 'child1',
  templateUrl: 'src/child1/child1.html',
})
export class Child1Component {
  @Output() nameEvent = new EventEmitter<string>();
  @Output() phoneEvent = new EventEmitter<string>();

  userName: string = '';
  userPhone: string = '';

  onNameChange () {
    this.nameEvent.emit(this.userName);
  }

  onPhoneChange () {
    this.phoneEvent.emit(this.userPhone);
  }
}

child1.html

<input
type="text"
(keyup)="onNameChange()"
[(ngModel)]="userName"
placeholder="Enter user name here">

<input
type="text"
(keyup)="onPhoneChange()"
[(ngModel)]="userPhone"
placeholder="Enter user phone number here">

child2.component.ts

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

@Component({
  selector: 'child2',
  templateUrl: 'src/child2/child2.html'
})
export class Child2Component {
  @Output() nameEvent = new EventEmitter<string>();
  @Output() phoneEvent = new EventEmitter<string>();

  userName: string = '';
  userPhone: string = '';

  onNameChange () {
    this.nameEvent.emit(this.userName);
  }

  onPhoneChange () {
    this.phoneEvent.emit(this.userPhone);
  }
}

child2.html

<input
type="text"
(keyup)="onNameChange()"
[(ngModel)]="userName"
placeholder="Enter user name here">

<input
type="text"
(keyup)="onPhoneChange()"
[(ngModel)]="userPhone"
placeholder="Enter user phone number here">

parent.component.ts

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

@Component({
  selector: 'parent',
  templateUrl: 'src/parent/parent.html'
})
export class ParentComponent {
  public userName = '';
  public userPhone = '';

  nameEventHander($event: any) {
    this.userName = $event;
  }

  phoneEventHander($event: any) {
    this.userPhone = $event;
  }
}

parent.html

<strong>Name: </strong>  {{userName}}
<strong>Phone: </strong>  {{userPhone}}

<child1
(nameEvent)="nameEventHander($event)"
(phoneEvent)="phoneEventHander($event)"></child1>

<child2
(nameEvent)="nameEventHander($event)"
(phoneEvent)="phoneEventHander($event)"></child2>