Does multislot transclusion works with Angular 2 components?

Question

let's say I've got the following basic component with two slots:

// my-component.component.ts
@Component({
  selector: 'my-component',
  template: `
<div class="my-component">
  <div>
    Title:
    <ng-content select="my-component-title"></ng-content>
  </div>
  <div>
    Content:
    <ng-content select="my-component-content"></ng-content>
  </div>
</div>`
})

And into the second slot ('my-component-content') I want to insert regular Angular 2 component...

<div class="app">
  <my-component>
    <div class="my-component">
      <div>
        Title:
        <my-component-title>
          This is the Component title!
        </my-component-title>
      </div>
      <div>
        Content:
        <my-component-content>
          <some-regular-angular2-component></some-regular-angular2-component>
        </my-component-content>
      </div>
    </div>
  </my-component>
</div>

Where 'some-regular-angular2-component' is a selector of some Angular 2 component...

@Component({
  selector:'some-regular-angular2-component'
})'

Problem is that 'some-regular-angular2-component' is never transcluded into ng-content second slot...Only regular HTML works for me...Of cource I tried to set 'some-regular-angular2-component' into [directives] of parent component, but Angular 2 component is not recognized inside of the ng-content...Or does this work for you?

Can you post a sample plunk or jsfiddle of what you think should work? Do you have the class of `some-regular-angular2-component` listed in the `directives` of your parent `@Component` decorator? That has to be there. — Jason Goemaat, Jul 29 '16 at 08:19

score 0 · Answer 1 · answered Jul 29 '16 at 08:23

You need to add <ng-content></ng-content> to the view (template) of <my-component-content> If <my-component-content> doesn't support transclusion, its children won't be shown. The <ng-content> tags in your code apply only to elements that match directly, but not their children.

score 0 · Answer 2 · answered Aug 01 '16 at 07:56

0

Just to answer my question, yes, angular 2 transclusion supports inserting of Angular 2 components. I had stupid typo in the code.

answered Aug 01 '16 at 07:56

Tomas Kloucek

251
2
12

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

Yes it does. It is now called content projection. See this example of a modal dialog with multiple slots.

edited May 23 '17 at 12:17

Community

1
1

answered Oct 20 '16 at 03:26

Stephen Paul

37,253
15
92
74

Does multislot transclusion works with Angular 2 components?

3 Answers3