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.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 public inputValue : string;
  onChange(UpdatedValue : string) :void
  {
    this.inputValue = UpdatedValue;
  }
}

app.component.html

child-component.component.ts

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

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

child-component.component.html

Add FormsModule in the app.module.ts

That's It !!