Recursive template angular

I just want to extend jpmorin post in case of a property based structure. Angular documentation for ng-repeat over properties here , and some row implementation can be found here.

Arsen Khachaturyan Arsen Khachaturyan 7, 4 4 gold badges 36 36 silver badges 38 38 bronze badges. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Making Agile work for data science.

Stack Gives Back Featured on Meta. New post summary designs on greatest hits now, everywhere else eventually. Linked 2. See more linked questions. As you can see, the ngFor directives was successfully able to recursively render the ngTemplate in which it was defined. When using the ngFor directive, there's no way to explicitly pass-in a "context" object - the ngFor directive implicitly passes-in the ngForContext object as the template context.

This means that my ng-template directive has to use the "implicit" export of the ngFor context as the "let-node" template binding. In this case, that's not an issue since I only want to pass-in the one value. But, for more flexibility, we can forgo the ngFor directive and simply use another ng-template to render the template recursively in much the same way that we use an ng-template instance to initiate the recursion :.

As you can see, this time, instead of relying on ngFor to implicitly export the loop item, I'm using the ng-template's ngTemplateOutletContext property to explicitly define the context for the recursive template. This approach leads to a bit more mark-up both in the component view and in the rendered Document Object Model , when compared to the ngFor approach; but, you can see that it provides for a bit more flexibility as you can control the shape of the ng-template context object.

I don't often have to reach for the ng-template directive in order to build an Angular 6 application. But, it is clear that the ng-template directive and other directives that accept a TemplateRef afford a great deal of power in view rendering. In this case, we were able to use the ng-template directive to traverse a recursive data-structure within the bounds of a single component.

Today, I wanted to revisit this problem space using recursive components instead of recursive ng-template invocation:. As you will see, the mechanics are essentially the same.

The difference is we need to start propagating inputs and outputs down and up the resulting DOM. This sounds tedious, but is actually quite straightforward. Thank you very Much , your Explanation help me lot to understand the Concept..

Hey Ben, Actually I'm a new guy to angular and I found this is very helpful. Yes, that should be totally doable. Though, it would likely be easier with recursive components than with a recursive template since the component would be able to store local state outside of tree-structure. I'll see if I can put together a demo for this. Note: You could do this with the template approach; but, you would have to store the toggle-state in the tree structure itself. And, to make it a bit more exciting, I'm persisting the expanded view-model the Browser URL so that the Folder Tree will maintain state across page refreshes.

Many times we come across templates in Angular where we have to recursively add UI components. For example, while creating a table of contents, there can be 0 or many sub-sections, as shown in the below picture:. To achieve such functionality, there are multiple ways in Angular. In this blog, we will discuss ng-template, which is the simplest of all. Embed What would you like to do? Embed Embed this gist in your website.

Share Copy sharable link for this gist. Learn more about clone URLs. Download ZIP. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.

Learn more about bidirectional Unicode characters Show hidden characters. Copy link.