Pass component as value in object Angular

I'm trying to implement a webapp in Angular 17 and I'm using a private library. There's a searchbar that needs a specific structure to be populated:

<search-bar
[searchResults]="searchBarResults"
...other attributes
></search-bar>


This search results respect this interface:

{
label: string;
linkUrl: string;
icon: string;
description: string;
value: string;
checkboxLabel: string;
checkboxName: string;
isChecked: boolean;
cardAdditionalData:
{
cardHeader: {
title: string;
description: string;
},
cardColumns: [
{
title: string;
description: string;
},
{
}
]
};
}


I cannot modify the interface, but i need the attribute "description" of cardcolumn object to render another component instead of string. I tried, without success, to pass directly the custom SelectComponent but it doesn't work. I cannot implement any solution that requires ng-template or anything. Is there a way to render the component as HTMLElement and pass it to description in this way using only TS files?

{
title: ciccio;
description: renderedSelectComponentInHtml;
}

Continue reading...