title: Angular wrapping angular material tabs component with in custom components
body: <p>What I am trying to achieve here is I wanna wrap the angular material tabs component with in my shared components.</p>
  <p>So, here is the component that I'm trying to wrap:</p>
  <p><strong>PS</strong>: I can display component in each tab:</p>
  <pre><code>&lt;mat-tab-group&gt;
    &lt;mat-tab label=&quot;First&quot;&gt; Content 1 &lt;/mat-tab&gt;
    &lt;mat-tab label=&quot;Second&quot;&gt; Content 2 &lt;/mat-tab&gt;
    &lt;mat-tab label=&quot;Third&quot;&gt; Content 3 &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  <p>So, I wanna use wrapper for it to use it like:</p>
  <pre><code>&lt;app-wrapper&gt;
    &lt;app-item&gt;
      &lt;app-item-header title=&quot;first&quot;&gt;&lt;/app-item-header&gt;
      &lt;app-item-content&gt;
        &lt;app-needs-to-be-displayed&gt;&lt;/app-needs-to-be-displayed&gt;
      &lt;/app-item-content&gt;
    &lt;/app-item&gt;
  &lt;/app-wrapper&gt;
  </code></pre>
  <p><strong>app-wrapper.html</strong></p>
  <pre><code>&lt;mat-tab-group&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  <blockquote>
  <p>no changes in the TS class</p>
  </blockquote>
  <p><strong>app-item.html</strong></p>
  <pre><code>&lt;mat-tab&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-tab&gt;
  </code></pre>
  <blockquote>
  <p>no changes in the TS class</p>
  </blockquote>
  <p><strong>app-item-header.html</strong></p>
  <pre><code>&lt;ng-template mat-tab-label&gt;
    {{title}}
  &lt;/ng-template&gt;
  </code></pre>
  <p><strong>app-item-header.ts class</strong></p>
  <pre><code>@Input() title:string = ''
  </code></pre>
  <p><strong>app-item-content.html</strong></p>
  <pre><code>&lt;div&gt;
     &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  <blockquote>
  <p>no changes in the TS class and this can hold an actual component</p>
  </blockquote>
  <p>This gives no error in the console but nothing appears on the page too.</p>
  <blockquote>
  <p><strong>and here is working stackblitz version</strong></p>
  <p><strong><a href="https://stackblitz.com/edit/angular-wrapping-component-with-ng-content" rel="noreferrer">https://stackblitz.com/edit/angular-wrapping-component-with-ng-content</a></strong></p>
  </blockquote>
  <blockquote>
  <p><strong>PS : Please advice guys if this is the best solution to achieve this
  or there is another solution ?</strong></p>
  </blockquote>