fomenkogregory
@fomenkogregory
Юниор софтварный инженер

Angular recursive component with custom templates. How to create?

Добрый вечер, господа. Пытаюсь сделать рекурсивный компонент, но так чтобы можно было задавать любой вью для данных через ngTemplateOutlet. Подскажите как лучше сделать? Сейчас проблема в том чтобы передавать темплейт внутрь компонента.
пример https://stackblitz.com/edit/angular-render-recursi...
только здесь темплейт захардкожен.
апи таким будет (если это возможно)
//  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>
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽