CODEWITHSUNDEEP
angular
qkhanhpro
qkhanhpro

Reputation: 5220

Change detection solution for self-nested component

I have a component with this structure

<comp>
    <comp> </comp>
    <comp> </comp>
</comp>

A change / click event in a deeply nested child will cause a update possibly to the whole "tree". For example: the tick on left side of this image below

https://www.jstree.com/

enter image description here

Which change detection strategy I should apply to this kind of problem? I already tried using EventEmitter that emit a "Selected node" event from deep child, up till the top-most node

I also think that all nodes can subscribe to a single Subject and do the update

What is the correct solution to apply to this kind of problem?

Upvotes: 0

Views: 90

Answers (1)

Eliseo
Eliseo

Reputation: 57999

For me, the way was that your component has as @Input children, parent and level, so you can recursive change the values, you can see an example in this response in SO. The "key" is declare a variable "self" and the inputs 

self=this;
@Input() level: number;
@Input() children: any;
@Input() parent: any;

And make some like

<li *ngFor="let item of children">
    {{item.label}}
    <ul recursive *ngIf="item.children" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
            </ul>
</li>

Upvotes: 0

Related Questions