Learn to communicate between components, sending properties from the parent component to the child. For this we will use Angular’s @Input decorator, which defines that certain component properties can be assigned from the parent template.
In previous articles in the Angular Manual, when addressing the introduction to the framework, we have mentioned on several occasions one of its fundamental characteristics: the component architecture.
We have said that an Angular application forms a tree of components, capable of collaborating with each other to solve business needs. But the truth is that, until now, our components have worked quite autonomously, without the possibility of interacting with each other.
In this article we are going to start by reviewing the usual communication processes between application components, especially analyzing the use of input properties decorated with @Input().
Sending data between components
It is true that in past articles we have seen how a service is capable of making it easier for components to share data, but it is not the only way we can achieve that goal.
In addition to services such as data communicators, there are different scenarios through which components can share information. Considering the component tree structure in the application, this communication can come from the parents to the children and from the children to the parents.
Passing of data from parents to children
The passing of information from parents to children is done through component properties. The information is bound from the template, using the component tag attributes.
To do this, the component’s properties must be decorated with @Input, so that Angular is able to know that they are capable of being initialized, or modified, from outside. This is the scenario we are going to address in this article.
Passing data from children to parents
The need may also arise for children to communicate to parents changes in the information they handle. In these cases Angular uses events. In other words, when the child has data and wants to send it to the parent, it generates an event that can be captured in the parent to perform the necessary actions.
To define the events that go from the children to the parents, Angular uses the @Output decorator, which we will see in detail in the next article.
Note: The travel of data from parent to child via their properties and the escalation of events to communicate data from child to parent is called a “mediator” pattern.
Passing data from parent components to child components
Now we are going to see how the data is sent from the parent to the child, starting with the definition of the data in the template.
Let’s suppose we have a component called VisualizarClienteComponent. This component shows a client file, with its main data (name, CIF…). To work, this component must receive from the parent the customer data that it must display.
On the other hand, we have another component that uses VisualizarClienteComponent, which has to pass the data to display. When using the component, you have to pass the data through the template, using the property binding.
The component usage would be like this:
As you can see, the properties are passed via binding, using the bracket syntax.
In view of this code it is understood that the parent component will have a client object. The child component will have three properties, “name”, “cif” and “address”. We will pass the value of “client.name” to the name property, we will pass the value of “client.cif” to the “cif” property, etc.
Note: Nothing prevents you from passing the entire object, all at once in a single property, instead of its separate values as in the example. It would be even clearer and even preferable in many cases in an application. However, for didactic purposes I have preferred to separate the data into several properties, for the reason of being able to express more clearly what belongs to each component, between child and parent.
Declaration of input properties with @Input
Next we are going to see how to define in the child component the properties that are capable of loading data from the parent. For this we will use the @Input decorator.
Import the @Input decorator
As a first step in the child component we need to import the Input decorator, which is in “@angular/core”.
import { Component, OnInit, Input } from ‘@angular/core’;
Declare properties with your @Input decorator
Also in the TypeScript code of the child component, we have to declare the properties in the class, just like we were doing, only we’ll add the @Input decorator to indicate that this property can be manipulated from the parent.
For now we are going to leave the decorator empty, which will suffice in most cases, although we could indicate some issues such as the name by which the property will be known from the outside.
@Input() name: string;
If desired, it is possible to apply a default value to the property, assigning any value. In that case, if that value is not supplied when using the component, the one defined by default will be assumed.
@Input() name=”WebDevelopment.com”;
Note: In this case it is not necessary to indicate that the type of the property is “string”, since the TypeScript compiler is able to infer it based on the assigned data.
Complete component code
Apart from the @Inputs, there is nothing in the component’s code that is not already known. However, we leave the complete code below.
import { Component, OnInit, Input } from ‘@angular/core’; @Component({ selector: ‘dw-view-client’, templateUrl: ‘./view-client.component.html’, styleUrls: }) export class ViewClientComponent implements OnInit { @Input() name=”WebDevelopment.com”; @Input() cif: string; @Input() address: string; constructor() { } ngOnInit() { } }
The component template does not have any detail to highlight either, since the properties are used in the same way as we have seen on previous occasions.
Name: {{name}}
Cif: {{cif}}
address: {{address}}
one direction binding
These data, as has been said, travel from the father to the son. If the parent modifies the value sent to the properties, it will also be modified in the child. You can test it if in the template where you have used the component you put a button to modify one of its properties.
Pressing the button will modify the CIF and therefore the component that consumed this data will change.
Remember that the binding is one-way, like all property bindings expressed with square brackets. Therefore, if the child modifies the property information, the new value will not travel to the parent.
In the next article we will show you.
Facebook Comments
Disqus