Angular templates with data

Issue

A parent component passes 2 templates and data to a child component. In the child component only the template without data is shown. How to show the template with data passed to it?

Parent component file:

export class ParentComponent {
  parentdata: string = 'String from parent with data';
  constructor() { }
}

Parent html/template file:

<app-child2
  [templateHeader]="list"
  [templateContent]="detail"
  [datafromparent]="parentdata">
</app-child2>

<ng-template #detail>
  Some data passed to it from outside
</ng-template>

<ng-template #list let-data="datafromparent">
  {{data}}
</ng-template>

The child component is: yup, will remove the ts-ignore ;-)

export class Child2Component {
  // @ts-ignore
  @Input() templateHeader: TemplateRef<any> | null;
  // @ts-ignore
  @Input() templateContent: TemplateRef<any> | null;
  @Input() datafromparent: string | undefined;
  constructor() { }
}

The child html/template file is:

<div class="header-css-class">
  <ng-container
    *ngTemplateOutlet="templateHeader; context: { data: datafromparent }">
  </ng-container>
</div>
<div class="content-css-class">
  <ng-container
    *ngTemplateOutlet="templateContent">
  </ng-container>
</div>

I hope you can help me with this one, because it is quite instructive for solving many (generic) problems.

Solution

Use the name of the data item from the context passed to the template (for clarity I changed the name from data to datafromcontext):

// in the child template
<ng-container
   *ngTemplateOutlet="templateHeader; context: { datafromcontext: datafromparent }">
</ng-container>

// in the parent template
<ng-template #list let-data="datafromcontext">
  {{data}}
</ng-template>

Answered By - Hopey One