title: Is there an Angular 2+ Equivalent to React Fragments?
body: <p>I would like to extract a portion of a component without actually creating an additional "wrapper" element in the physical DOM, because it breaks my CSS.</p>
  
  <p>Example: I noticed a section in my HTML template that looks like this:</p>
  
  <pre><code>&lt;div&gt;Foo&lt;/div&gt;
  &lt;div&gt;Bar&lt;/div&gt;
  </code></pre>
  
  <p>I want extract these two tags into a component called <code>&lt;MyComponent&gt;</code>, and reuse it in other places. However, when I don't actually want a parent component called <code>&lt;MyComponent&gt;</code> to be added to the DOM. Currently what I see rendered is</p>
  
  <pre><code>&lt;MyComponent&gt;
    &lt;div&gt;Foo&lt;/div&gt;
    &lt;div&gt;Bar&lt;/div&gt;
  &lt;/MyComponent&gt;
  </code></pre>
  
  <p>React lets me solve this problem perfectly using the concept of a <a href="https://reactjs.org/docs/fragments.html" rel="noreferrer">Fragment</a> component, which lets you group elements without adding an additional node to the DOM.</p>
  
  <p>I am wondering if there is a section of the Angular Component API that I'm missing that will let me do this, or it there's a fundamentally different way I should be thinking about reusing code within Angular Components.</p>
  
  <p>This application is in Angular 6, and I'm coming from a background in React 16+.</p>
  
  <p>Edited with Sample Code Snippet: I would like this to render without having a <code>hello</code> element added to the DOM - I only want the <code>&lt;p&gt;</code> tag inside the <code>hello</code> component to appear</p>
  
  <p><a href="https://stackblitz.com/edit/angular-kaxm27" rel="noreferrer">https://stackblitz.com/edit/angular-kaxm27</a></p>