Передайте html как вход для компонента angular

Question

Я хотел бы создать компонент app-my-component, который можно использовать следующим образом:

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

Затем я хотел бы использовать этот компонент / html элемент внутри app-my-component , вот так:

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

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

Как такое возможно? Мне не удалось найти никакой документации по этому поводу, но однажды я видел код, использующий эту функцию, поэтому я надеюсь, что это все еще возможно.

Я добавил это в класс MyComponent:

@ContentChild(TemplateRef)
public inputElement: TemplateRef;

Но элемент не отображается.

Answer 1

В родительском компоненте оберните весь проецируемый элемент внутри ng-template следующим образом

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

Рабочий пример

Answer 2

Попробуйте использовать что-нибудь вроде этого. Это называется проекцией контента

<!-- 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>