CODEWITHSUNDEEP
javascriptangular
Iter Ator
Iter Ator

Reputation: 9299

Pass html as an input to an angular component

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.

Upvotes: 0

Views: 2956

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27363

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

Upvotes: 2

Related Questions