There are times that you need to render a template recursively. For instance, when you have a page with comments, you need to be able to render nested comments and reuse the same component.

In this short article, we are going to create a component that will take as Input comments and will know how to display them recursively.

The Structure:

This is the JSON structure that we expect to get from our server. For this demonstration, we will make it static. ( you can change this structure to how you prefer it )

Build the Comments Component

As you can see, we can call our component recursively. We don’t want to render the component when there are no comments, so we need to add the ngIf directive. ( not required if you don’t have any styles attached to the host )

Create the App Component

The Result

🔥 Last but Not Least, Have you Heard of Akita?

Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment, and we’re continually adding features to it.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

I highly recommend checking it out.

Follow me on Medium or Twitter to read more about Angular!