Pass html as an input to an angular component

Question

I would like to create an app-my-component component, which can be used in the following way:

<app-my-component>
    <div>Some element inside</div>
</app-my-component>

Then I would like to use that component/html element inside the app-my-component , like this:

<p>You provided this element as parameter:</p>

<ng-template [ngTemplateOutlet]="inputElement"></ng-template>

How is it possible? I was not able to find any documentation about this, but I once saw a code using this feature, so I hope it is still possible.

---

I added this to the MyComponent class:

@ContentChild(TemplateRef)
public inputElement: TemplateRef;

But the element does not appear.

Answer 1

Try using something like this. Its called content projection

<!-- inside container / app-my-component component -->
<ng-content select="slot-one"></ng-content>

<!-- inside another component using container component -->
<app-my-component>
  <slot-one>Some element inside</slot-one>
</app-my-component>

Answer 2

In parent component, wrap all the projected element inside ng-template like this

<app-my-component>
    <ng-template>
      <div>Some element inside</div>
    </ng-template>
</app-my-component>

Working Example