1

My goal is to select a piece of HTML in component 2 which should render HTML with data from component 1.

This is the demo pseudo code of my aproach:

Component 1

<div>     
  <ng-content select="[item-template]; context: { $implicit: data}"></ng-content>
</div>

Component 2

<app-component-1>
  <ng-template item-template let-data>
     <div>{{data.prop1}}</div>
  </ng-template>
</app-component-1>

Hope to have explained my question well. Thanks in advance.

Elkin
  • 880
  • 2
  • 12
  • 26
  • You're looking for `ngTemplateOutlet` – yurzui Jan 17 '20 at 15:23
  • @yurzui I tried that and got error. Correct me if i am wrong please but I think`ngTemplateOutlet` is meant for HTML templates in same component. – Elkin Jan 17 '20 at 15:29
  • What is the problem you were **originally** trying to solve with this *solution* that doesn't work for you. – Reactgular Jan 17 '20 at 15:33
  • 1
    https://ng-run.com/edit/eJ69MbIMWDwd3aMBsJ0p?open=app%2Fapp.component.html – yurzui Jan 17 '20 at 15:33
  • @Reactgular I want to create a reusable component to list items and i would like the client of the component to decide the way items are displayed – Elkin Jan 17 '20 at 15:38
  • Nothing special being asked here. Just pass the component a template as an input binding. ``. It has *nothing* to do with `` – Reactgular Jan 17 '20 at 20:03
  • @Reactgular That solution does not pass dynamic data from component 1 to component 2 – Elkin Jan 18 '20 at 13:52
  • @yurzui Thanks for the working demo. Would that work for multiple `ngTemplateOutlet` with different `template`? – Elkin Jan 21 '20 at 15:33

0 Answers0