title: Correct way to implement wrapper components in Angular 4?
body: <p>Update: </p>
  
  <p>The correct question is probably: "how do I implement my own version of <code>ng-container</code> so I can use "<code>&lt;my-component ...&gt;...&lt;/my-component&gt;</code>" instead of "<code>&lt;ng-container my-directive ...&gt;...&lt;/ng-container&gt;</code>".</p>
  
  <p>I am developing a new app in Angular 4. I want to build my entire app with wrapper components so I can swap out the actual components if need be. This works easily for simple controls but not for complex controls we want to break up into separate components. The best example is with tabs because the requirements are fairly stable: a list of tabs with labels and content panels that we show/hide.</p>
  
  <p>ng-bootstrap may use something like this:</p>
  
  <pre><code>&lt;ngb-tabset&gt;
    &lt;ngb-tab title="Tab 1"&gt;
      &lt;ng-template ngbTabContent&gt;...&lt;/ng-template&gt;
    &lt;/ngb-tab&gt;
    ...
   &lt;ngb-tabset&gt;
  </code></pre>
  
  <p>We may have some other component like this:</p>
  
  <pre><code>&lt;div class="my-tab-group"&gt;
    &lt;ul&gt;
      &lt;li&gt;Tab 1&lt;/li&gt;
      ...
    &lt;/ul&gt;
    &lt;div class="my-tab" title="Tab 1"&gt;...&lt;/div&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Instead of tying my app to a specific implementation at this time I want to define my own tabs wrapper and use it everywhere like this:</p>
  
  <pre><code>&lt;my-tabs-control&gt;
    &lt;my-tab-control title="Tab 1"&gt;...&lt;/my-tab-control&gt;
    ...
  &lt;my-tabs-control&gt;
  </code></pre>
  
  <p>Then if I need to change the way my tabs work it happens in one place. However, if we use a wrapper component then the HTML gets polluted with the host element tags interlaced with the desired tags which obviously messes things up, e.g.</p>
  
  <pre><code>&lt;my-tabs-control&gt;
    &lt;div class="my-tab-group"&gt;
      &lt;ul&gt;
        &lt;li&gt;Tab 1&lt;/li&gt;
        ...
      &lt;/ul&gt;
      &lt;my-tab-control title="Tab 1"&gt;
        &lt;div class="my-tab" title="Tab 1"&gt;...&lt;/div&gt;
      &lt;/my-tab-control&gt;        
      ...
    &lt;/div&gt;
  &lt;my-tabs-control&gt;
  </code></pre>
  
  <p>My guess is this is the reason why a lot of people ask how to unwrap/remove the host element in an Angular component - that would make this really simple to do.</p>
  
  <p>The usual answer is to use attribute selectors instead, e.g.:</p>
  
  <p><a href="https://stackoverflow.com/questions/38994620/remove-the-angular2-components-selector-tag">Remove the angular2 component&#39;s selector tag</a></p>
  
  <p><a href="https://stackoverflow.com/questions/34588933/how-to-remove-replace-the-angular2-components-selector-tag-from-html">How to remove/replace the angular2 component&#39;s selector tag from HTML</a></p>
  
  <p>However, this means we need to know the tag structure at the usage site, which obviously destroys the whole point of using nicely named wrapper tags.</p>
  
  <p>Thus, finally, how should I be doing this? Is it perhaps not possible due to performance reasons? I have started looking at Renderer2 but have not found an obvious way to do what I want, and I want to avoid non-angular DOM hacks.</p>