DEV Community 👩‍💻👨‍💻

Mini Bhati
Mini Bhati

Posted on

How to respond to input changes reactively in the child component

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>
Enter fullscreen mode Exit fullscreen mode
export class ChildComponent {
  @Input() userValue;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Life is too short to browse without dark mode