Scenario
My task is to develop a component that fetches content from a database and displays it on the page. There needs to be two components working together to create a single page, following a specific component tree structure.
DataList - receives full JSON object
DataListItem - displays the first object
DataListItem - displays the second object
DataListItem - continues this pattern for all objects
The DataListItem must be able to display content in various ways, which is why it requires multiple templates.
I am looking for a solution that does not involve putting everything in one HTML file with an ngSwitch directive or creating separate components for each template since I have around 72 templates. Ideally, I want to use multiple HTML files that can be loaded into the DataListItem component.
Approach
Currently, my approach involves making an HTTP request to fetch the template, which seems to be effective. However, the binding for {{ data.contentId }} is not working as expected; instead of displaying the data, it shows up as plain text on the page. Here is an example.
I would appreciate any insights on how to resolve this issue, or if there are alternative methods to achieve the desired outcome.
Thank you in advance ;)
Update
In essence, my main query revolves around loading different templates within a component based on a parameter provided by the parent component that specifies the type of template to be used.
Apologies for the lack of clarity, as my current workload prevents me from easily sharing the entire code on platforms like Plunker. Additionally, the code is connected to an API, making the process more complex.