How to improve performance in Angular 2 with a multi-dimensional List with actions?
Jean Baptiste MARCHETTI
Hello i am developing an application with Angular2. I recieve via an api a multi-dimensional list that I must display in an html table.
Here is the simplified version of the json that I receive from the api:
{
"events": [
{
"id": 0,
"name": 0,
"sub_events": [
{
"id": 0,
"name": 0,
"actions": [
{
"id": 0,
"name": 0
}
]
}
]
}
]
}
I tried to isolate the components when displaying like this:
ListComponent:
<event-view [event]='event' *ngFor="let event of events"></event-view>
EventComponent: (event-view selector)
<div>
<h1>{{event.id}} {{event.name}}</h1>
<table>
<tr subevent-view [subEvent]='subEvent' *ngFor="let subEvent of event.sub_events"></tr>
</table>
</div>
SubEventComponent: (subevent-view selector)
<td>{{subEvent.id}}</td>
<td>{{subEvent.name}}</td>
<td>
<event-action [action]='action' *ngFor="let action of subEvent.actions"></event-action>
</td>
EventActionComponent: (event-action selector)
<button (click)='....' >{{action.name}}</button>
All my components use changeDetection: ChangeDetectionStrategy.OnPush
I would like that when I click on an action Angular 2 does not recheck the whole list but only the clicked button.
For now Angular does a check on the list + one check on all events + one on all subevents + one on all actions ...
I tried using ChangeDetectorRef.detach but it does not change anything.
My root list events is created with ImmutableJS.
Is there a way to tell angular to check only one child component without re-checking the whole tree?
I ve made a plunker of my problem http://plnkr.co/edit/aVMD4IMg6bxwcMvhZ271?p=preview
(the checks are logged in the console)
If someone has already had problems with unnecessary checking
Help me please 
Thank you in advance ;)
