_angular-parent-child-communication-input.md

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

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

child1.component.ts

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

@Component({
  selector: 'child1',
  templateUrl: 'src/child1/child1.html',
})
export class Child1Component {
  @Input() userNameFromParent = '';
  @Input() userPhoneFromParent = '';
}

child1.html

<strong>Name: </strong>  {{userNameFromParent}}
<strong>Phone: </strong>  {{userPhoneFromParent}}

child2.component.ts

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

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

child2.html

<strong>Name: </strong>  {{name}}
<strong>Phone: </strong>  {{phone}}

parent.component.ts

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

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

parent.html

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

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

<child1
userNameFromParent="{{userName}}"
userPhoneFromParent="{{userPhone}}"></child1>

<child2
theUserName="{{userName}}"
thePhone="{{userPhone}}"></child2>