title: How to inject Blazor Components into self developed TabControl
body: <p>I found a very simple video that I used to manage to build a TabControl in Blazor. More or less it was a great template.</p>
  <p>The youtube video can be found here: <a href="https://www.youtube.com/watch?v=EMWfM3_v0J4" rel="nofollow noreferrer">https://www.youtube.com/watch?v=EMWfM3_v0J4</a></p>
  <p>But what I want to do now is build a component out of it. And I wonder how I can insert other components from the outside?</p>
  <p>I would like to do the following in my Blazor code:</p>
  <pre><code>&lt;TabControlComponent&gt;
    &lt;Component1 Title=&quot;...&quot; /&gt;
    &lt;Component2 ... /&gt;
    &lt;Component3 /&gt;
    &lt;Component4 /&gt;
    &lt;Component5 /&gt;
  &lt;/TabControlComponent&gt;
  </code></pre>
  <p>How the titles of the individual items are displayed on the button is clear to me. But it is not clear to me how to insert the components from the outside.</p>
  <p>The code for the component looks like this.</p>
  <pre><code>&lt;div class=&quot;btn-group&quot;&gt;
  
      @foreach (var item in types)
      {
          if (Array.IndexOf(types, item) == selected)
          {
              &lt;button class=&quot;btn btn-primary&quot;&gt;@item.Name&lt;/button&gt;
          }
          else
          {
              &lt;button class=&quot;btn btn-secondary&quot; @onclick=&quot;() =&gt; selected = Array.IndexOf(types, item)&quot;&gt;@item.Name&lt;/button&gt;
          }
      }
  
  &lt;/div&gt;
  
  @GetRenderFragment(types[selected]);
  
  @code {
  
      RenderFragment GetRenderFragment(Type type)
      {
          RenderFragment rf = builder =&gt;
          {
              builder.OpenComponent(0, type);
              builder.CloseComponent();
          };
          return rf;
      }
  
      int selected = 0;
  
      [Parameter]
      public ComponentBase[] Components { get; set; }
  
      Type[] types =&gt; Components.Select(c =&gt; c.GetType()).ToArray();
  
  }
  </code></pre>