title: How to conditionally remove the wrapping div and keep its children?
body: <p>I want to make a structural directive named <code>showWrapperIf</code>, which either keeps the whole element and children it sits on, or, when the condition is <code>true</code>, removes the element (wrapper) it sits on, and takes all the children and keep it in the DOM.</p>
  
  <p>So, the result of this</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *showWrapperIf="true"&gt;
      &lt;h2&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;any-component&gt;&lt;/any-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>would be</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;h2&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;any-component&gt;&lt;/any-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but, if the <code>condition</code> is <code>false</code>, only the children need to be displayed. E.g:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;any-component&gt;&lt;/any-component&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-grydzz?embed=1&amp;file=src/app/shared/directives/show-wrapper-if/show-wrapper-if.directive.ts" rel="nofollow noreferrer">StackBlitz demo</a></p>
  
  <p>I know I can do it with <code>&lt;ng-template&gt;</code> and <code>*ngIf</code>, but the wrapper has lots of children, it would double the size of the file and make it less readable.</p>