How to pass child nodes to an angular component? [duplicate]

Question

I want to reuse a repeated pattern of my angular 5 component.

Passing some string values to the component was easy, I wrote:

<my-component attribute1="bla" attribute2="foo"></my-component>

in combination with:

@Component({
    selector: 'my-component', ...
})
export class MyComponent {
    @Input() attribute1: string;
    @Input() attribute2: string;
}

Now, I want to pass a template-snippet to the component. Ideally I would end up with something like this:

<my-component attribute1="bla" attribute2="foo">
    <h1>My Content</h1>
    <p>Some text<span *ng-if="important"> !!!</span></p>
</my-component>

<!-- and at some other place -->
<my-component attribute1="blubb" attribute2="blubber">
    <img src="../gala.png"/>
</my-component>

How can I receive and use those nested template / dom entries in my own component?

Answer 1

You can use <ng-content></ng-content> to get that nested template / dom entries in my your component. Basically It's in Transclusion concept of angular.

For more in detail read out here