We can structure any Angular application in a tree of components. So, in designing process, we need to insure that component's are reusable and self contained and at the same time have some means for communicating with each other.
Our main topic is, how components pass data to each other in a loosely coupled manner.
1. Parent to Child : In this communication we discuss on, how a parent component ( means it contains another component ) can pass data to it's child by binding to the input properties of child component.
2. Child to Parent : In this, we discuss how a child component can send data to parent by emitting some kind of event via its output properties.
3. No parent child relationship : In this, we discuss about a mediator design pattern to arrange data exchange between components that don't have parent-child relationship.
Component can be think as a black box with input and output. Component can have as many as inputs and outputs.
Input to component or Input properties :
If any component needs to receive values from the outside world, you can bind the values to the corresponding inputs of the component.
Whom they received from? The component doesn't have to know.
The component just needs to know what to do with these values when they are provided.
Output of component or Output properties :
If component needs to communicate values to the outside world, it can emit events through its outputs.
Whom they are emitted to? The component doesn't have to know.
Whoever is interested can listen or subscribe to the events that a component emits.
The Mediator Pattern :
When you design a component-based UI, each component should be self contained, and components should not rely on the existence of other UI components. Such loosely coupled components can be implemented using the Mediator design pattern.
Let's say we have a component A which has input text field, where user can input a email address. and we have another independent component B which has "Submit" button. The problem is, once user type some text, and it matches the email format, we need to enable "Submit" button.
Now, as component A and B doesn't have parent-child relationship, we need to implement mediator pattern for their communication. For this, components A and B can be wrapped with one parent ( a container ) component which can play the role of mediator. For the communication between the component in tree view, this patterns helps to communicate with any component.
Here, the job of the mediator is, he needs to receive data from one component ( eg. A ) and pass it to another (eg. B ) through input and output properties respectively.
For our example, if user input valid email address in component A, component A output a event or call a callback to parent and passes the email address to parent component. and in the response of this event, parent component receives the email address and pass it to his child component B using component data binding.
Reference :
1. Angular 2 Development with Typescript By Yakon Fain, Anton Moiseev
Our main topic is, how components pass data to each other in a loosely coupled manner.
1. Parent to Child : In this communication we discuss on, how a parent component ( means it contains another component ) can pass data to it's child by binding to the input properties of child component.
2. Child to Parent : In this, we discuss how a child component can send data to parent by emitting some kind of event via its output properties.
3. No parent child relationship : In this, we discuss about a mediator design pattern to arrange data exchange between components that don't have parent-child relationship.
Component can be think as a black box with input and output. Component can have as many as inputs and outputs.
Input to component or Input properties :
If any component needs to receive values from the outside world, you can bind the values to the corresponding inputs of the component.
Whom they received from? The component doesn't have to know.
The component just needs to know what to do with these values when they are provided.
Output of component or Output properties :
If component needs to communicate values to the outside world, it can emit events through its outputs.
Whom they are emitted to? The component doesn't have to know.
Whoever is interested can listen or subscribe to the events that a component emits.
The Mediator Pattern :
When you design a component-based UI, each component should be self contained, and components should not rely on the existence of other UI components. Such loosely coupled components can be implemented using the Mediator design pattern.
Let's say we have a component A which has input text field, where user can input a email address. and we have another independent component B which has "Submit" button. The problem is, once user type some text, and it matches the email format, we need to enable "Submit" button.
Now, as component A and B doesn't have parent-child relationship, we need to implement mediator pattern for their communication. For this, components A and B can be wrapped with one parent ( a container ) component which can play the role of mediator. For the communication between the component in tree view, this patterns helps to communicate with any component.
Here, the job of the mediator is, he needs to receive data from one component ( eg. A ) and pass it to another (eg. B ) through input and output properties respectively.
For our example, if user input valid email address in component A, component A output a event or call a callback to parent and passes the email address to parent component. and in the response of this event, parent component receives the email address and pass it to his child component B using component data binding.
Reference :
1. Angular 2 Development with Typescript By Yakon Fain, Anton Moiseev
Comments
Post a Comment