Component Communication In Angular
In this article, we will learn a few methods by that Angular Components can communicate and interact with one another. An Angular App's basic building block is the Component. There are a lot of components in a typical Angular application. Each component is responsible for a certain aspect of the user interface. To create the application's overall user interface, these components must interact or communicate with one another.
Communication between components
Components can communicate and share data in a limited number of ways. And techniques are dependent on whether or not the components have a parent-child relationship.
The three scenarios are as follows:
- Parent to Child Communication
- Child to Parent Communication
- When there isn't a parent-child relationship, interaction
Parent to Child Communication
If the Components have a parent-child relationship, the parent component can use the @input Property to transmit data to the child.
Passing Data with the @Input Decorator
In the Child Component, create a property (someProperty) and decorate it with @Input(). The property will now be marked as an input property.
export class ChildComponent {
@Input() someProperty: number;
}
Instantiate the Child Component in the Parent Component. Using the Property Bind Syntax, pass the value to someProperty.
<child-component [someProperty]=value></child-component>`
As a result, the data from the parent component will be received by the Child Component.
You can learn how to send data from parent to child in Angular in the article pass data from parent to child in Angular.
Listen for Input Changes
The values of someProperty can be retrieved by the Child Component. However, it is also critical for the child component to be notified when the values change.
There are two options for accomplishing this.
- Using the life cycle hook OnChanges or
- Using a Property Setter to Change the Value of an Input Property
Child to Parent Communication
There are three ways for a child to communicate with his or her parents.
- Listens to Events from the Perspective of a Child
- Accesses the child in the Template using a Local Variable.
- To gain a reference to the child component, using a @ViewChild.
Listens to Child Event
The child component accomplishes this by exposing an EventEmitter Property. This Property is also decorated with the @Output decorator. The emit event of the EventEmitter Property is raised when a Child Component needs to communicate with its parent. The Parent Component is aware of the occurrence and reacts accordingly.
Refer to the lesson Parent Listens to Child Event for an example.
Uses Local Variable to access the child
Another method is to refer to the child component using a Local Variable.
Create a reference variable #child to the Child Component, for example.
<child-component #child></child-component>
To access a property of the Child Component, use the child (notice without the #). The code below shows the count of the Child Component on the screen.
<p> current count is {{child.count}} </p>
Uses a @ViewChild to get the reference to the child component
<child-component></child-component>
The ViewChild query in the component class is another approach to acquire the child component's reference.
@ViewChild(ChildComponent) child: ChildComponent;
Any method in the Child component can be called.
increment() {
this.child.increment();
}
Communication when there is no relation
If the Components don't share the Parent-Child relationship, the only way for them to share data is through services and observables.
The benefit of employing a service is that it saves you time.
- Data can be shared among different components.
- When the data changes, you can use observable to alert each component.
Create a Service and use either BehaviorSubject or Subject to create an Angular Observable in that service.
export class TodoService {
private _todo = new BehaviorSubject<Todo[]>([]);
readonly todos$ = this._todo.asObservable();
...
}
Whenever data is available or changes using the Subject's next method, the _todo observable will emit it.
this._todo.next(Object.assign([], this.todos));
You can listen to changes in the component class by subscribing to the observable.
this.todoService.todos$.subscribe(val=> {
this.data=val;
//do whatever you want to with it.
})
Conclusion
In this article, we learned a few methods by that Angular Components can communicate and interact with one another. In the next article, we learn about the How To Pass Data From Parent To Child Component.I hope this article helps you and you will like it.👍
If you have any doubt or confusion then free to ask in comment section.