How to avoid Angular using extra tag for a child component?

Question

Let's say I have parent and child component in Angular 12. For example, their templates looks like this:

Parent:

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <ng-container>
            <app-child-component></app-child-component>
        </ng-container>
    </div>
</div>

I must use ng-container

Child:

<button>Click</button>

What angular does is create wrapper around child's component template, something like this:

    <h1>This is parent component</h1>
    <div class="container">
        <div class="row">
            <div class="col">Foo</div>
            <app-child-component>
                <button>Click</button>
            </app-child-component>
        </div>
    </div>

The desired effect I want to achieve is:

        <h1>This is parent component</h1>
        <div class="container">
            <div class="row">
                <div class="col">Foo</div>
                <button>Click</button>
            </div>
        </div>

I tried using attribute selector, i.e.

<div app-child-component></div>

But that adds extra div element I do not want. Attribute selectors can not be used on ng-template etc.

Does this answer your question? [Angular2 : render a component without its wrapping tag](https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag) — Matthieu Riegler, Aug 25 '23 at 09:44
@MatthieuRiegler No. The accepted answer uses attribute selector, as I previously tried. Other answers does not work as well. — Vladimir99, Aug 25 '23 at 10:54

score 1 · Answer 1 · answered Aug 25 '23 at 11:22

1

You can use <ng-content></ng-content> on Child component Like :

<div>
   <ng-content></ng-content>
</div>

After That You can try:

 <div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <app-child-component>
            <button>Click</button>
        </app-child-component>
    </div>
</div>

Also you can check medium For more Detalis

answered Aug 25 '23 at 11:22

Debabrata909

57
4

That solves this simplified problem. The real problem is ... recursive. Child component has nested components(of same type - Child) ... – Vladimir99 Aug 25 '23 at 11:59

score 1 · Answer 2 · answered Aug 25 '23 at 17:16

Well, it is something that is very difficult to overcome in angular, it always creates host element.

There is one way to flatten hierarchy but it will add redundant node.

You have to use ng-template in app-child-component:

<ng-template #temlate><button>Click</button></ng-template>

Then inject ViewContainerRef to app-child-component.

Use ViewContainerRef to render template:

// i don't remember exact usage
viewContainerRef.createEmbeddedView(tempalteRef, null, viewContainerRef.length);

It will render template below app-child-component node, so the result will be like this:

<h1>This is parent component</h1>
<div class="container">
    <div class="row">
        <div class="col">Foo</div>
        <app-child-component></app-child-component>
        <button>Click</button>
    </div>
</div>

Then you can hide app-child-component node:

:host {
   display: none;
}

How to avoid Angular using extra tag for a child component?

2 Answers2