I have recursive tree component and I would like to expand all nodes on click from parent component, how can I do this? More details in plunker.
I talking about this method:
expandAll(){
console.log("expanded all");
}
-
1Your plunker is empty, the only component in it is not a recursive one.Supamiu– Supamiu2016-09-26 09:13:29 +00:00Commented Sep 26, 2016 at 9:13
-
Im so sorry, try to check it now.ulou– ulou2016-09-26 09:21:38 +00:00Commented Sep 26, 2016 at 9:21
Add a comment
|
2 Answers
Just add an expandAll() method to the TreeComponent that expands all nodes and calls expandAll() on all nested TreeComponent components.
You can get all nested TreeComponent components by adding
@ViewChildren(TreeComponent) subTrees:QueryList<TreeComponent>;
and call the method on the childs like
expandAll() {
for(var subTree of this.subTrees.toArray()) {
subTree.expandAll();
}
}
answered Sep 26, 2016 at 9:24
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
8 Comments
ulou
Ok, but how can I call in app component method from parent TreeComponent?
Günter Zöchbauer
Sorry, I don't understand what your comment means. From how I understand your question, this is what my answer should explain.
ulou
This is what you meant plnkr.co/edit/5Q5obfcW1mhsYe9jFXZo?p=preview, right? And how can I call expandAll of parent tree component from app component?
Günter Zöchbauer
I show 2 ways in plnkr.co/edit/gYHzyBf8EEF9Cxn5sUR3?p=preview (one is view only, the other with the 2nd pair of buttons is using
@ViewChild())ulou
Its look like your plnkr doesnt work (buttons) for me, did you saved your final version?
|
After a while I guess I figure it out. I just added one more @Input() in TreeComponent:
@Input() expandAll: boolean;
and replaced *ngIf recursive condition to:
[hidden]="(!expanded[i] && !expandAll) || (expanded[i] && expandedAll)"
Its need a bit more work (collapsing all doesnt work that how it should), but it works that how I wanted.
Comments
