Skip to main content

Sending data to child component using @Input and two-way binding in Angular

Here we are going to see how the data will be communicated from parent component to child component using @Input() method.

@input() can be used in two ways.
·        Two way binding with @Input()
·       ngOnChange() event and @input()

Here we gonna look at Two way binding with @Input().

Technical implementation:
            Here we have two component AppComponent (parent component) ChildComponent ( child component).
App component contains Textbox, When user enters any of the data, it will be passed to Child component and display as a span there.


import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  public inputValue:string;


<div style="border: 1px solid chocolate; height: 250px;
width: 350px; padding: 10px 10px" > 
 <span> <b>Parent component</b></span>
  Type here : <input type="text" [(ngModel)]='inputValue' />
  <child-component [message]='inputValue'></child-component>


import { Component, OnInit, Input } from '@angular/core';
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
export class ChildComponentComponent {
  @Input() message:string;
  constructor() { }


<div style="border:1px solid chocolate; width:300px;
   height: 120px; padding: 10px 10px">
   <b> Child component</b><br><br>
    you entered {{message}}

Add FormsModule in the app.module.ts

That's It !!


  1. Thank you for posting themThese articles are exactly what I need.They are my cup of tea. I hope you will add more posts.
    free game Toon Cup 2017 Game Break The Cup play Battle for the Galaxy

  2. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.
    free kizi Games
    Jogo para criança
    friv4school 2019


Post a Comment