Standalone Component Exports

[rosostolato]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Allow standalone components to export other components to be accessed from within.

Proposed solution

@Component({
  standalone: true,
  selector: 'app-tab-group',
  exports: [TabComponent], // export `app-tab` to be accessed as a child of `app-tab-group`
  ...
})
export class TabGroupComponent { }

@Component({
  standalone: true,
  selector: 'app-my-component',
  imports: [TabGroupComponent], // only import TabGroup and TabComponent will come along
  template: `
    <app-tab-group>
      <app-tab>Tab 1</app-tab>
      <app-tab>Tab 2</app-tab>
      <app-tab>Tab 3</app-tab>
    </app-tab-group>
  `
})
export class MyComponent { }

In this way, TabGroupComponent would act as a module and you won't need to import TabComponent every time you want to use them.

Alternatives considered

The alternative is to create a module and export both components, but you will still be chained to ng modules. And if you import both components all the time you need them, your imports list gets enormous.

[JeanMeche]

Hi, this goes against the explicit depencies standalone pushes for.

The solution you're probably looking for is the one discussed in #48089: Having an array of dependecies to import.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}