Angular2+ render a component without any wrapping

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!

Answer 1

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-content *ngTemplateOutlet='wrapper.childComponentTemplate'></ng-content>

This way there is no wrapper at all.