Mini Bhati
Mini Bhati

Follow

Mini Bhati

Follow
How to respond to input changes reactively in the child component

How to respond to input changes reactively in the child component

Define property accessor methods on the Input bindings in the child component to reactively respond to input changes

Mini Bhati's photo
Mini Bhati
·Aug 15, 2022·

1 min read

Play this article

Table of contents

  • Parent Child Component Interaction
  • Setters on the @Input() property
  • Thanks for reading!

Component interaction can work in one of the following three ways:

  • ngOnChanges() lifecycle hooks
  • Setters on the @Input() property
  • Services

If your component is a presentational component and interacts only with the @Input() and @Output() properties, then using setters is the most reactive way of interacting with the child component

Let's understand how!

Parent Child Component Interaction

Parent component passes value to the child component with the following syntax where userValue is an @Input() property in the child component

<child-component [userValue]="userValue"></child-component>
export class ChildComponent {
  @Input() userValue;
}

Setters on the @Input() property

Setters on the @Input() property runs some additional logic whenever the input changes. So, instead of defining userValue, we define a function on the userValue property which executes whenever input changes.

export class ChildComponent {
  status = false;
  @Input() set userValue(value: string) {
      this.status = true;
  }
}

These are called property accessor methods which executes on setting/getting values. Add a set keyword before a property to make a setter.


Thanks for reading!

Please feel free to reach out on Twitter or LinkedIn

 
Share this