Thanks a lot. In the sample, each time click "adddatagrid" button, it will add a new tab. Is it possible just allow the first time, when 2nd time or later just make the former 1st added tab active.

I use the way of angular dynamic loading. But failed with the following:

core.js:1440 ERROR Error: StaticInjectorError(AppModule)[TabPanelComponent -> TabsComponent]:
  StaticInjectorError(Platform: core)[TabPanelComponent -> TabsComponent]:
    NullInjectorError: No provider for TabsComponent!

Hi,
Could you give us sample for dynamically add tab and load another angular component to the added tab? I searched the web.Most of them is static way.

Hi :
Could you please kindly give us a sample of this? Thanks a lot for your great help.

Hi，
Is there api method like addTab in ts code not the template way in your sample code? Just like Jquery EasyUI?

Hi，
Thanks. Sorry for the confusion, what i mean is to do that from one round trip to the server not first the columns and then data. 

How to check if a TabPanelComponent exits in the TabsComponent's panels list by the TabPanelComponent's name?

How to automatically create grid columns according to server side tabular data?

<eui-layout #layout fit ="true" style="height: 100%">
  <eui-layout-panel region="north" class="logo" title="后台管理"   style="text-align:center;">
  </eui-layout-panel>
  <eui-layout-panel region="west" title="导航" collapsible="true" euiResizable handles="e"  style="width:150px;" (resizing)="layout.updatePaddings()">
    <eui-tree [data]="menuData"></eui-tree>
  </eui-layout-panel>
  <eui-layout-panel region="center" style="display:flex;flex:1;height:100%;">
    <eui-tabs style="display:flex;flex:1">
      <eui-tab-panel [title]="'Tab1'"[bodyStyle]="{display:'flex' }"  style="border: 1px solid red;padding: 0px">
        <eui-panel style="flex:1;">
          <eui-datagrid
            [pagination]="true"
            [lazy]="true"
            [data]="data"
            [total]="total"
            [pageNumber]="pageNumber"
            [pageSize]="pageSize"
            [pagePosition]="pagePosition"
            [loading]="loading"
            (pageChange)="onPageChange($event)">
            <eui-grid-column field="inv" title="Inv No"></eui-grid-column>
            <eui-grid-column field="name" title="Name"></eui-grid-column>
            <eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column>
            <eui-grid-column field="price" title="Price" align="right"></eui-grid-column>
            <eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column>
            <eui-grid-column field="note" title="Note"></eui-grid-column>
          </eui-datagrid>
        </eui-panel>
      </eui-tab-panel>
      <eui-tab-panel [title]="'Tab2'"></eui-tab-panel>
      <eui-tab-panel [title]="'Tab3'"></eui-tab-panel>
    </eui-tabs>
  </eui-layout-panel>
  <eui-layout-panel region="south">
    <eui-panel-header>
      <div class="panel-title" style="text-align:center">版权所有 2015-2017</div>
    </eui-panel-header>
  </eui-layout-panel>>
</eui-layout>

Hi,
I tried your suggestion, but failed and caused a new problem about datagrid columns. You can check the attached picture.

How to make LayoutPanelComponent's title align center?

Hi
I have tried set inline style:style="flex:1;border: 1px solid red;", but not worked.

Please add fit layout options to TabsCompoent,so that we can set the size of tabs container to fit it's parent container.

Hi,
how to make it take 100% of the page?

Hi,
But i tried your splitpanel layout demo, the height cannot be 100% event if i set the style height = '100%'