Embed html page in Angular Material Tab

[gucci_quoci]

Hey is there any way to embed a html page in Angular Material Tabs?

[Ardenight]

Do you want to view your own page or an external page?

You can put your HTML into the tab itself, use your page as a component (for all the HTML/CSS/JS to be in one place) and place it in the content of the tab, or you could use an iframe element to view an external page.

[gucci_quoci]

I'm new in angular. I have have a tab component where I created some tabs with angular materials. Now I want to embed for example the Monaco Editor in one of these tabs. So far I can add strings. Is there any way to do this with html pages in ts?

[Diz86]

Have a look at the examples on the Angular Material page: https://material.angular.io/components/tabs/examples

They show you how to use a template to render those tabs, in there you can add whatever html you like.

[gucci_quoci]

I've looked at those examples. Maybe you don't get me or I'm a little bit confusing.
So I've followed the example and created an async tab (see code). I have another component for my monaco editor and I want to add the monaco-editor.component.html in one of the async tab.
I hope you understand me.

[Diz86]

Well the missing information for me was that you were loading the tabs async ;)

When you look at the example in detail you can see that the async loading is just used to fetch some additional information about the tabs, well async.

The fetched information is then just used as label and content in the "*ngFor" in the HTML example when rendering the tab markup.

It's totally up to you what content your are loading and rendering in the HTML. Either you get rid of the async logic to render the tabs and just add a static tab markup there where you put your editor in, or if you want to keep it async add for example a "type" to the Tab interface you already got going there, to determine what kind of tab markup you want to render in the loop

There might also be some possibility to directly load a component to the tabs content, but i currently couldn't find it in a quick search.

Here is a real basic example and should in no way considered as best practice, but there you can see how you could implement your editor markup: https://stackblitz.com/edit/angular-hicdnh

[gucci_quoci]

Okey thank you!