How to detect @input() bindings changes in Angular?


This is an short tutorial on how to detect when an @input changes

@input is an angular decorator that help us for property binding for an input.

So input name implies that it is an input data passed to component.

@input adds metadata to angular component for property binding and allows to add it to DOM element.

@input directive used in following things

  • Passing data from child to parent or vice verse
  • Passing data as input to component

@input is an directive from @angular/core module, So you have to import to use in Angular component.

Let’s declare an component input-binding.component.ts in Angular

And pass input data this component

For example

<input-binding data="Welcome Cloudhadoop"></input-binding>

How do detect @input changes in Angular component?

There are multiple ways we can detect changes

using ngOnChanges binding as one way binding

ngOnChanges is an component lifecycle method , this will be called whenever data of input property is changed.

This accepts SimpleChanges class which is from @angular/core module. SimpleChanges holds currentValue,previousValue of input property

ngOnChanges(changes: SimpleChanges) :void {
}

Here is an example

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

@Component({
  selector: 'input-binding',
  templateUrl: './input-binding.component.html',
  styleUrls: ['./input-binding.component.css']
})
export class InputBindingComponent implements OnInit {
  @Input() data:String;

  ngOnChanges(changes: SimpleChanges) {
    // get Current Value
    let currentVal = changes.data.currentValue; 
    // get Previous Value
    let previousVal = changes.previousValue;

  }

  constructor() {}

  ngOnInit() {}
}

Html component

<h1>
  Input input-binding example
</h1>

<div>
  {{data}}
</div>

This component can be used in any other components or modules.

<input-binding data="Welcome user"></input-binding>

This approach used when you have all changes can be detected with ngOnChanges method, And it holds current and previous values which you can compare it

Input Property setter and getter methods

if you have simple one input changes , We can use this approach And It is very simple to use this approach.

  • Provide input property which you have setter and getter for it
import {
  Component,
  Input,
  OnInit,
  SimpleChanges
} from '@angular/core';

@Component({
  selector: 'input-binding',
  templateUrl: './input-binding.component.html',
  styleUrls: ['./input-binding.component.css']
})
export class InputBindingComponent implements OnInit {
 
  private _name: string;

  @Input() set name(value: string) {
    this._name = value;
  }

  get name(): string {
    return this._name;
  }

  constructor() {}

  ngOnInit() {}
}

Component can be used as seen below

<input-binding name="Welcome Cloudhadoop"></input-binding>
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.