Как сделать табы на Angular подобным образом?

Question

[Олег]

Быть может кто-нибудь подскажет в каком направлении думать.
Нужно сделать табы, в заголовки и контент которых можно было бы передавать html или другие компоненты.

<app-tabs>
   <app-tab *ngFor="let tab of tabs">
       <app-tab-title>
           <b>Title</b> of tab {{tab}}
      </app-tab-title>
      <app-tab-component>
         <b>Title</b> of tab {{tab}}
          <some-component  [tab]="tab"></some-component>
      </app-tab-component>
   </app-tab>
</app-tabs>

Answer 1

[Дмитрий Еремин]

https://blog.angular-university.io/angular-ng-temp...

Answer 2

[Medin K]

В шаблоне компонента используй <ng-content></ng-content>

@Component({
    selector: 'app-tab',
    template: `<ng-content></ng-content>`
})

@Component({
    selector: 'app-tab-title',
    template: `<ng-content></ng-content>`
})

Comments

[Олег]

У меня сложность в том, как сгруппировать все app-tab-title в одном блоке, допустим в
<div class="titles"></div>

который, как я понимаю, должен быть внутри app-tabs

[Medin K]

sxm,
тебе надо с @ContentChildren получить массив компонентов app-tab
дальше на словах не объясню :)

// app-tab = AppTabComponent
@ContentChildren(AppTabComponent) tabs: QueryList<AppTabComponent>;

смотри тут https://github.com/vmware/clarity/blob/master/src/...

Answer 3

[Василий Мажекин]

Посмотрите в этом направлении https://www.npmjs.com/package/@codehint-ng/tabs
Тут можно что угодно помещать в заголовки и контент табов можно размещать в произвольных компонентах в произвольных местах.