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.

What does your template look like? Should be an <ng-content> in there.. — MikeOne
– MikeOne, Commented Jul 14, 2020 at 14:21
@Bozhinovski I've never heard of content projection. I will check it out! — Iter Ator
– Iter Ator, Commented Jul 14, 2020 at 14:24

Chellappan வ · Accepted Answer · 2020-07-14 14:29:29Z

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>

answered Jul 14, 2020 at 14:29

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

1 Answer 1