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.
Top comments (0)