You cannot take an arbitrary
string and turn it into a component's template. It would require to compile the string at the runtime, but even
Angular's JIT compiler's minimal
unit is NgModule, not a string.
If you need to dynamically create a tab's content you have several options, which one to choose depends on your particular use case. I've created an
Angular demo application which shows different ways to address this problem. Here is the short descriptions of available options:
Option #1
The most idiomatic way would be to use the
MdTabNavBar component instead of
MdTabGroup. Tabs in
MdTabNavBar do not have a content. Instead they trigger a router navigation which renders a component inside the
<router-outlet>. In the router configuration you can define which route corresponds to which component. Here is a quick example:
Option #2
If the content of your tabs is limited to simple HTML markup and doesn't include Angular components, you may still use
[innerHTML] however you need to use
DomSanitaizer to bypass
security restriction. Here is a quick example:
Component:
Template:
The full example is
here.
Option #3
If your tab's content includes Angular components, but you think it doesn't deserve a separate custom component, you may use
ngTemplateOutlet directive. This way content of your tabs becomes part of your host component's template but it's wrapped into a
<template> HTML element, so it's not rendered by browsers. Each tab references the corresponding
template element. Here is a quick example:
Template:
Component:
The full example is
here.
Option #4
This is similar to the Option #1 but doesn't include the router part (this option may be used with
MdTabGroup as well as with
MdTabNavBar). The idea is to create a separate component for each tab's content and listen to tab change event. When a tab is selected we dynamically instantiate a component and render it on the page. Here is quick example:
Template:
Component:
The full example is
here.