Here is a great article that I came across.
The article explains the speed difference between angular1 and angular2, stating that one reason for the faster performance of angular2 is its ability to create a unidirectional change detection tree.
However, my confusion arises when considering components with @output and eventEmitter, as the data flow in such cases is inherently non-unidirectional due to the possibility of data flowing back to the parent component.
For instance,
Child Component
@Component({
selector: 'Child',
inputs: ['myfullname'],
outputs: ['changefirstname']
})
@View({
template: `
<div (click)="changefirstname()">
{{myfullname}}
</div>
`
})
export class Child {
public myfullname: String;
public myevent: EventEmitter = new EventEmitter();
changefirstname(evt) {
this.myevent.next('newfirstname');
}
}
Parent Component
@Component({
selector: 'Parent',
directives: [Child]
})
@View({
template: `
<Child [myfullname]={{myfullname}} (myevent)="handleMyEvent($event)"></Child>
`
})
export class Parent {
this.myfullname = 'default';
handleMyEvent(arg) {
this.myfullname = arg;
}
}
In this simple setup, clicking on the child component updates the name in the parent component. However, since the child receives the name from the parent, it also gets updated. This demonstrates a non-unidirectional data flow, as it is not strictly top-down.
We can even consider a more complex scenario like:
A
/ \
B C
Where C emits an event to
A</code, resulting in a model change that affects both <code>CB. Focusing solely on the subtree of C during change detection would overlook the model changes in A and B.
So, is the article incorrect? Or am I overlooking something?