Load Components dynamically from JSON and render it in HTML

Viewed 169

I have a content JSON, which has custom angular components. What I want to achieve is being able to extract from that JSON the content and display it.

Sample JSON

{
"contentContainer": {
    "contentList": {
        "Home_Div_1": {
            "refId": "Home_Div_1",
            "content": "<title-component> Hi there </title-component>"
        },
        "Home_Div_2": {
            "refId": "Home_Div_2",
            "content": "<desc-component> Description section </desc-component>"
        }
    }
}

}

So the HTML page should be like

 <title-component> Hi there </title-component>
<desc-component> Description section </desc-component>

[Applying all the component level styles etc ]

I have tried inner HTML with dom sanitiser etc which works fine if only HTML tags are used, not for custom angular components. The problem is the string extracted from the JSON needs to be transformed and be rendered as a custom angular component like if it were not coming from the JSON but a module itself. I have tried - but the problem here is it does not we dont receive a html, but a string.

Newbie here, any help in the right direction will be helpful

0 Answers
Related