Angular recursive component with custom templates. How to create?

  • 0
    Good evening, gentlemen. I'm trying to make a recursive component, but so that I can set any view for the data via ngTemplateOutlet. Tell me how best to do it? Now the problem is to pass the template inside the component.
    example https: // stackblitz. com / edit / angular-render-recursi ...
    only here the template is hardcoded.
    api will be like this (if possible)
    //  recursive-view.component.ts
    export class RecursiveViewComponent<T> {
      @Input() value: RecursiveArray<T> = []
      @ContentChild('templateRef') templateRef: TemplateRef<unknown>
    }
    
    // recursive-view.component.html
    <ng-container *ngIf="isArray; else itemView">
      <app-recursive-view *ngFor="let item of value" [value]="item">
         <!-- Вот здесь должен быть ng-template как снаружи чтобы рекурсия продолжалась :|  -->
      </app-recursive-view>
    </ng-container>
    
    <ng-template #itemView>
      <ng-container *ngTemplateOutlet="templateRef; context: {$implicit: value}"></ng-container>
    </ng-template>
    
    // app.component.html
    <app-recursive-view [value]="value">
      <ng-template #templateRef let-data>
        <h1>{{data.name}}</h1>
        <h3>{{data.text}}</h3>
        <h5>{{data.likes}}</h5>
      </ng-template>
    </app-recursive-view>
    JavaScript Isabella Roy, Jan 20, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!