typescript - Ladda komponenter dynamiskt från JSON och rendera dem i HTML

Jag har en innehålls-JSON, som har anpassade Angular-komponenter. Vad jag vill uppnå är att kunna extrahera innehållet från den JSON och visa det.

Exempel 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>"
        }
    }
}

}

Så HTML-sidan bör vara som

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

[Tillämpa alla stilnivåer för komponenter etc.]

Jag har försökt med inner HTML med dom-sanitiserare etc. vilket fungerar bra om endast HTML-taggar används, men inte för anpassade Angular-komponenter. Problemet är att strängen som extraheras från JSON behöver omvandlas och renderas som en anpassad Angular-komponent, som om den inte kom från JSON utan från själva modulen. Jag har försökt - men problemet här är att vi inte får en HTML, utan en sträng.

Nykomling här, all hjälp åt rätt håll kommer vara till hjälp