Angular html custom element from typescript

Question

I'm a bit new to Angular and this problem seems nquite easy but I didn't find any solution on the web...

Here is what I want : I have a component, named PageComponent (for example), and I want its html template to come from the back-end. It works fine for classic html elements ; for instance :

page-component.html :

<div [innerHtml]="content"></div>

page-component.ts :

// [...]
export class PageComponent implements OnInit {
   this.content = ""
   // [...]

   ngOnInit() {
      this.content = "<p>Hello world !</p>"
   }
}

So, it works fine here. The problem comes when I want to "inject" some custom elements, namely some material elements, such as the material tab group.

In short, I want the same feature as before but with a content like the following :

this.content = "<mat-tab-group><mat-tab label='label'><p>hello world</p></mat-tab></mat-tab-group>"

I know custom elements don't work for the 'innerHtml' property ; when I look at the web inspector (F12 -> inspector) on the html file it shows the right content (i.e. the mat tab group element and the rest) but it doesn't actually display it on the GUI.

Actually, "this.content" is assigned to a string coming from the back end. I don't know much about DOM manipulation and Angular preprocessing, maybe it's really easy ^^

'npm --version' gives me 8.19.2 angular core, cdk are v14, material is v13.3.9

So is there a way to inject custom elements in a html in Angular, like the 'innerHtml' property ?

Thanks !

First, I have tried to copy and paste the raw string on the html file of the component (page-component.html) and it works (the GUI shows the tabs like I want), so the problem doesn't come from Material (I have imported MatTabsModule).

I have tried different things such as content projection (https://angular.io/guide/content-projection), dynamic components (https://falconsoft.github.io/ngx-dynamic-components/), dynamic hooks (https://github.com/MTobisch/ngx-dynamic-hooks#3-what-it-does), the deprecated compontentFactoryResolver (and the features that replace it) but it handles components, and I want to handle raw strings. I've also seen some threads mentioning directives and since it doesn't seem to be the right way either I didn't look further.

I've also seen elementRef, embeddedView, templateRef (and ) and other contents like this (https://angular.io/api/core/ViewContainerRef) but I didn't find a solution.

I must admit I have seen so much features I am quite lost and don't really know how to properly tackle this problem.

As I wrote, I tried the 'innerHtml' with native html elements, and I'm looking for the same feature working with material elements.

I have seen this stackoverflow thread : Angular 6 Custom Element inside InnerHtml Keeps Reloading, but it is not exactly the same problem, and there is no answer yet.

When I tried the aforementioned features I had one of the following result : -the html file in the web inspector is '' (no ) -the html file is good but the GUI is not good (blank page, or it just shows the content of the tabs without the tabs, here "hello world")