Can we pass html template from one component to another component in angular2?

Question

Suppose i have a base component CardComponent which is resuable ie, it will accept input such as 1. DataArray 2. HTML template(that is iterated over)

So consumer component will use CardComponent selector and pass both dataArray and Template.

How can i achieve it? (passing htmltemplate)

Answer 1

You can use ng-content tag.

Your reusable component (YOUR-REUSABLE-COMPONENT) template is something like this.

<div class="box">
    <ng-content></ng-content>
</div>

Usage of your reusable component inside some other component template

<YOUR-REUSABLE-COMPONENT>
<div class="class1">
<h1>my main component</h2>
</div>
</YOUR-REUSABLE-COMPONENT>

Answer 2

Yes, it is possible to pass HTML template using the ng-content approach but you should always go via template approach.

Your .html file -> Generic ->

<div>
      <ng-container *ngTemplateOutlet="template"> </ng-container>
 </div>

Your .ts file

    @ContentChild(TemplateRef)
    template: TemplateRef<any>;

and your other component files from where you want to pass the template:

<my-component>
     <ng-template> Your HTML Content </ng-template>
 </my-component>

More details regarding why you should consider ng-template instead of

https://medium.com/michalcafe/angulars-content-projection-trap-and-why-you-should-consider-using-template-outlet-instead-cc3c4cad87c9

Angular 2 use a "template" for ng-content to use inside component loop