Angular2+ render a component without any wrapping tag at all

Question

My child-component looks like:

... @Component({ selector: '[child-component]' templateUrl: './child.template.html' }) ...

and my parent template like:

<span child-component [someInput]="123"></span>

now I want to render the content of my child component without the <span> container around it. I want no container at all in my parent component's template, just the content of our child-component's template.

I tried some other tags already.

<ng-content> (nothing rendered at all)
<ng-template> (Components on an embedded template:)
<ng-container> (Failed to execute 'appendChild' on 'Node')

Thanks in advance!

Child components selector should be child-component, remove brackets and simple render <child-component></child-component> — Yashwardhan Pauranik
– Yashwardhan Pauranik, Commented Sep 4, 2018 at 15:52
@YashwardhanPauranik that will also lead to a container in the DOM. — sevic
– sevic, Commented Sep 4, 2018 at 15:53

sevic · Accepted Answer · 2020-12-11 12:05:48Z

13

Finally found a working soltion!

My child-component looks like:

@Component({ selector: 'child-component' templateUrl: './child.template.html' }) export class ChildComponent { @ViewChild('childComponentTemplate') childComponentTemplate: TemplateRef<any>; }

My child template looks like:

<ng-template #childComponentTemplate> ... some content ... </ng-template>

and my parent template like:

<child-component #wrapper [someInput]="123"></child-component> <ng-container *ngTemplateOutlet='wrapper.childComponentTemplate'></ng-container>

This way there is no wrapper at all.

edited Dec 11, 2020 at 12:05

answered Sep 5, 2018 at 10:50

sevic

99411 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabio Delarias Over a year ago

Wow... in 2022 this was my only solution. I am trying to convert a react app to angular. unfortunately I love using react fragments and there is no equivalent in angular so this Hack is a life saver. Thanks a million

ZolaKt Over a year ago

I'm not really following this. Ok, maybe it won't result in any wrappers, but you will still have a mess in the dom. Once rendered, won't this result in: <child-component></child-component> ... some content ... Which would still mess up things if used inside e.g. <tr>, <mat-select>, <mat-form-field>... and all other components that expect specific child components

JWrightII Over a year ago

This works a treat and while obviously not how we'd prefer to do it, get's the job done with only a couple extra lines. One thing to note is that by changing the child template property to @ViewChild('childComponentTemplate', { static: true }) you can avoid the annoying expressionChangedAfterItHasBeenChecked issue since it won't be undefined when it loads.

luiscla27 · Accepted Answer · 2023-03-07 21:12:03Z

8

Your use-case can be solved by using CSS only, just set child-component as display: contents,

child-component { display: contents; }

As stated on display: contents documentation, this causes to appear as if the component were direct children of the element's parent.

edited Mar 7, 2023 at 21:12

answered Jun 9, 2020 at 18:00

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

2 Comments

maxisam Over a year ago

It is a cool trick, but it is not what op want. He want to remove the element from the DOM, not just visually.

luiscla27 Over a year ago

This answer appeals that maybe he doesn't need to remove the DOM :) the element using display:contents ignores itself, this is mainly useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

CoTg · Accepted Answer · 2022-05-04 08:12:21Z

This method can avoid ExpressionChangedAfterItHasBeenCheckedError error.

child-component:

@Component({ selector: 'child-component' templateUrl: './child.template.html' }) export class ChildComponent implements OnInit { @ViewChild('childTemplate', {static: true}) childTemplate: TemplateRef<any>; constructor( private view: ViewContainerRef ) {} ngOnInit(): void { this.view.createEmbeddedView(this.currentUserTemplate); } }

parent-component:

<child-component></child-component>

+1, just some details: this.currentUserTemplate should be this.childTemplate (Also reader has to refer to the other answers for what the child-components html should look like.)

Collectives™ on Stack Overflow

Angular2+ render a component without any wrapping tag at all

3 Answers 3

3 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Linked

Related