How to conditionally remove the wrapping div and keep its children?

Question

I want to make a structural directive named showWrapperIf, which either keeps the whole element and children it sits on, or, when the condition is true, removes the element (wrapper) it sits on, and takes all the children and keep it in the DOM.

So, the result of this

<div *showWrapperIf="true">
    <h2></h2>
    <p></p>
    <any-component></any-component>
</div>

would be

<div>
    <h2></h2>
    <p></p>
    <any-component></any-component>
</div>

but, if the condition is false, only the children need to be displayed. E.g:

<h2></h2>
<p></p>
<any-component></any-component>

StackBlitz demo

I know I can do it with <ng-template> and *ngIf, but the wrapper has lots of children, it would double the size of the file and make it less readable.

Answer 1

This approach seems to be too complicated because your content also contains your own components. Instead, you could move this logic to a separate component which would make your code neat and concise. Create a component, say conditional-wrapper, and add it to your module. In the component just place a basic Input to accept the wrapperElement from the parent.

@Input() wrapperElement: boolean;

In the template, just add code to conditionally show any element as a wrapper or no wrapper as the default using a ngSwitch.

<ng-container [ngSwitch]="wrapperElement">
    <div *ngSwitchCase="'div'">
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </div>
    <h2 *ngSwitchCase="'h2'">
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </h2>
    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </ng-container>
</ng-container>

<ng-template #noWrapper>
    <ng-content></ng-content>
</ng-template>

Now all you need to is recursively show conditional-wrapper from the parent component and the ng-content will show project the data from your parent component to the child.

<conditional-wrapper [wrapperElement]="condition ? 'div': ''">
    <h2>Child 1</h2>
    <p>Child 2</p>
    <footer>Child 3</footer>
    <conditional-wrapper [wrapperElement]="condition ? 'div': ''">
        <p>Nested Child 4</p>
    </conditional-wrapper>
</conditional-wrapper>

Here is a working example on StackBlitz.

Answer 2

I don't think you can do that. Please note that when the well documented angular way does not suffice, you might be heading into a wrong direction!

Anyway, something that might get close to what you need (I think ) is to add a class on the host element!

You can do that as follows

this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);

if (this.condition) {
  const elementRef = (this.viewContainer.get(0) as any)
     .rootNodes[0] as ElementRef;
  this.renderer.addClass(elementRef, "myclass");
}

stackblitz

and you can do the rest with css