How to make tabs in Angular like this?

Question

JavaScript

Perhaps someone will prompt in what direction to think.
It is necessary to make tabs, in the headers and content of which html or other components could be passed.

<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

In the component template, use<ng-content></ng-content>

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

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

Answer 3

Look in this direction https://www.npmjs.com/package/@codehint-ng/tabs
Here you can put anything in headers and tab content can be placed in arbitrary components in arbitrary places.