Skip to main content

Detect changes in parent component using @Input and ngModelChange 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()
·        One way binding using ngOnChange() event and @input()
Here we gonna look at one way binding with ngModelChange 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;
  onChange(UpdatedValue : string) :void
    this.inputValue = UpdatedValue;


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() { }


Add FormsModule in the app.module.ts

That's It !!


  1. You must be a kind people because you share your knowledge through articles.I have read all your articles. I really like them. It's very kind of you to share your insight.They give me effective tips.
    play Battle for the Galaxy Break The Cup For Free free game Toon Cup 2017

  2. Fantastic blog.Really thank you! Cool.Fantastic post.Your article is very nice thank you for share this such a wonderful article. This is a very nice blog that I will definitely come back to more times this year! They have lots of knowledge and tips.
    kizi kizi 2 games
    friv jogo
    friv 4 school


Post a Comment