require (parent controllers) en Angular moderno

app.component('tabPane', {
  require: { tabs: '^^tabGroup' },
  bindings: { title: '@' },
  transclude: true,
  template: '<div ng-show="$ctrl.active" ng-transclude></div>',
  controller: function () {
    this.$onInit = function () { this.tabs.addPane(this); };
    this.$onDestroy = function () { this.tabs.removePane(this); };
  }
});

@Component({
  selector: 'app-tab-pane',
  template: `<div [hidden]="!active()"><ng-content /></div>`,
})
export class TabPaneComponent {
  private tabs = inject(TabGroupComponent);
  title = input.required<string>();
  active = computed(() => this.tabs.selected() === this);
}

// in TabGroupComponent: the parent finds its panes with a query
panes = contentChildren(TabPaneComponent);
selected = signal<TabPaneComponent | undefined>(undefined);