Angular：包装器组件以传递内部指令/组件

Question

I have 3 components:

(1) AppComponent : This is just a regular AppComponent , nothing special. In app.component.html I use my MyComponent :

<my-component></my-component>

(2) MyComponent : This is just a wrapper component that contains TheirComponent like this ( my.component.html ):

<their-component></their-component>

(3) TheirComponent : This is a third-party component (from an NPM package). It can contain directives and other components from the third-party components. For example:

<their-component>
    <their-header>Title</their-header>
    <their-footer>Title</their-footer>
</their-component>

---

My goal is to put all of these additional, inner directives and components ( their-header and their-footer in this example) in app.component.html , and pass it through MyComponent to TheirComponent . So my app.component.html should look like this:

<my-component>
    <their-header>Title</their-header>
    <their-footer>Title</their-footer>
</my-component>

---

I tried to use ng-content for this. It works with simple HTML elements, I know, but not with these third-party directives. This is what I tried ( my.component.html ):

<their-component>
    <ng-content></ng-content>
</their-component>

It doesn't work, and there are no errors. Maybe this is a content projection problem, I'm not sure, how this is called. Any solution for this? Thanks.

---

Example: https://plnkr.co/edit/SgM4sbYQrZXDcrKuon2d?p=preview

Answer 1

If you really need it you can take advantage of using ngProjectAs attribute.

In order to have all addition functionality provided by ButtonGroup ( k-group-start , k-group-end classes etc) you have to pass buttons array to kendo component.

Here's how it could look like:

import { Component, QueryList, ContentChildren, Input, ViewChild } from '@angular/core';
import { Button, ButtonGroup } from '@progress/kendo-angular-buttons';

@Component({
  selector: 'my-component',
  template: `
    <kendo-buttongroup>
        <ng-content ngProjectAs="[kendoButton]"></ng-content>
    </kendo-buttongroup>
  `
})
export class MyComponent {

  @ViewChild(ButtonGroup) buttonGroup: ButtonGroup;

  @ContentChildren(Button) buttons: QueryList<Button>;

  ngAfterViewInit() {
    this.buttonGroup.buttons = this.buttons;
    this.buttonGroup.ngAfterContentInit();
  }
}

Plunker Example

See also:

• https://github.com/angular/angular/issues/21762
• https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b