Height 0 in tabbed components

I want to create a component with dynamic material tabs

The component is for administering tabs for specific pages and the idea is to reuse the component and centralize the logic for administering the pages

If I extract the md-tab group to another component, the height of the whole component is reduced to 0 Plunker with expected view: https://plnkr.co/edit/BilxU9
Plunker with actual view: https://plnkr.co/edit/Bbb50t

There is no service in the example that I would use to administer the tabs from each page.

I tried with dynamicHeight but it didn't work.

I don't know if this is a bug or if I am doing something that cannot be done.

Thank!

Example of finished code:

<page-tabed-card>
    <md-tab role="tab"  *ngFor="let tab of tabs | async; let i = index">
      <div role="tab" class="tab">
        <template md-tab-label>
          Content 1
          <b class="closer" (click)="close(i); $event.stopPropagation()">X</b>
        </template>
        <h1>Sushi restaurants</h1>
        <p>Mama Gao</p>
      </div>
    </md-tab>
</page-tabed-card>