DI/Discuss: Allow providers to be injected based on the final ng-content transclusion point

[matanlurey]

Problem

Had a nice discussion with @tbosch and @yjbanov this AM.

Assume you have the following component, say Tabs:

@Component(
  selector: 'tabs',
  bindings: const [
    const Binding(TabManager, toAlias: TabsComponent)
  ]
)
@View(
  template: '<ng-content></ng-content>'
)
class TabsComponent implements TabManager {
  getActiveTab() => ...
}

Today, the following works:

@Component(selector: 'tab')
class TabComponent {
  TabComponent(TabManager tabManager) { ... }
}

<tabs>
  <tab></tab>
  <tab></tab>
</tabs>

However, what if you want to build a bigger, composite widget and use delegating?

@Component(
  selector: 'page'
)
@View(
  directives: const [TabsComponent],
  template: r'''
    <h1>Navigation</h1>
    <tabs>
      <ng-content select="tab"></ng-content>
    </tabs>
    <main>
     <ng-content select="main-content"></ng-content>
    </main>
  '''
)

<page>
  <tab>Home</tab>
  <tab>Contact</tab>
  <tab>About</tab>
  <main-content>
    Welcome to my home page!
  </main-content>
</page>

In this case, the code will fail! <tab> is transcluded finally into <tabs>, but does not have knowledge or a way to interact using the TabManager interface. This hurts making composable/re-usable components 😢

Suggestions

1. Have yet a third type of binding/provider, that supports transcluded content
2. Have a way to re-publishing providers upwards (?)
3. Have an alternative way to allow interaction in this manner

@IgorMinar @vsavkin

[matanlurey]

@jelbourn who possibly has run into this problem? Maybe :)

[yjbanov]

Assigning @vsavkin to provide comments. I have yet to form an opinion about it. On one hand, ng-content is there simply because not all browsers support native shadow DOM, in which case conceptually the projected DOM does not physically move into ng-content, only visually. On the other hand, this seems like a totally legit use-case. Perhaps we could implement two orthogonal features, one for "visual reprojection" and one for "DI reprojection"?

[matanlurey]

Angular has thrown native shadow DOM out anyway, so I don't feel strongly about keeping browser contracts 😇

[PascalPrecht]

It's not thrown away but disabled by default.

On Thu, Nov 5, 2015, 9:53 AM Matan Lurey notifications@github.com wrote:

Angular has thrown native shadow DOM out anyway, so I don't feel strongly
about keeping browser contracts [image: 😇]

—
Reply to this email directly or view it on GitHub
#5126 (comment).

[vsavkin]

Since I am not sure how frequent this use case is, I am reluctant to mix the DI and ng-content concerns. It can make DI a lot more complicated.

What about this way of doing it?

@Component({
  selector: 'tabs',
  providers: [
    new Provider(TabManagerProvider, {useAlias: TabsComponents})
  ],
  template: '<ng-content></ng-content>'
)
class TabsComponent implements TabManager {
  get tabManager() { return this; }
}

@Component({selector: 'tab'})
class TabComponent {
  constructor(private provider: TabManagerProvider){}

  onInit() {
    this.provider.tabManager; // do interesting stuff with it
  }
}

@Component({
  selector: 'page'
  directives: [TabsComponent],
  template: ``
    <h1>Navigation</h1>
    <tabs>
      <ng-content select="tab"></ng-content>
    </tabs>
    <main>
     <ng-content select="main-content"></ng-content>
    </main>
  `,
  providers: [new Provider(TabManagerProvider, {useAlias: Page})]
})
class Page {
  @ViewChild(Tabs) tabManager;
}

This pattern requires an extra level of indirection, but keeps both DI and ng-content simple

[matanlurey]

What if the <tab> component is created before <tabs>?

I think this is a decent work around/pattern, but could fail if you have the following logic:

<!-- The <tabs> component won't be created right away, but <tab> will be. -->
<tabs *ng-if="isLoading">
  <ng-content select="tab"></ng-content>
</tabs>

[artaommahe]

Same issue while upgarding ng1 app to ng2 with menu component. Any chances to get a solution soon?

plnkr with example http://plnkr.co/edit/p7Vd4FRpHPRtyEuL6pEZ

[brachi-wernick]

This cause to this issue: formControlName could not be used with component transclusion
angular can't find the ControlContainer because it comes thru transclusion. exactly like @artaommahe example above

[splincode]

@matanlurey Is the issue relevant?