I am facing an issue where I need to repeat the same code in two different places. The profiles, profile1 and profile2 are arrays. I want to display the same HTML code without duplicating it.
profile1 = [{name : 'mr.A1',age : 25 },
{name : 'mr.B1',age : 23}];
profile2 = [{name : 'mr.A2',age : 25 },
{name : 'mr.B2',age : 23}];
<ng-container *ngFor="let x of profile1">
<ng-template #templateRef>
<p> {{x.name}}</p>
<p> {{x.age}}</p>
</ng-template>
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
</ng-container>
// The above code displays the following result
mr.A1
25
mr.B1
23
// The below code currently does not show anything
<ng-container *ngFor="let x of profile2">
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
</ng-container>
// My goal is to achieve the following results using ngTemplateOutlet
mr.A2
25
mr.B2
23