3

I'm trying to use ComponentResolver and ng-content together, however, when the resolver builds the component the transcluded content is not rendered.

I'm using Angular2 RC3. I do know there is some upcoming changes coming to the ComponentResolver ( https://github.com/angular/angular/issues/9467 ) that might affect this.

import {
  Input, 
  Component, 
  OnInit, 
  ViewContainerRef, 
  ComponentResolver, 
  ViewChild 
} from '@angular/core';
/**
 * COLUMN
 */
@Component({
    selector: 'column-component',
    template: `
      <div style="border:1px solid green; padding:5px;display:block;">
        <b>column: {{label}}</b>
        <ng-content></ng-content>
      </div>`
})
export class ColumnComponent {
  @Input() label: sting = "";
}
/**
 * CELL
 */
@Component({
    selector: 'cell-component',
    template: '<b>cell component</b> <div #target></div>'
})
export class CellComponent {

  @ViewChild('target', {read: ViewContainerRef}) target;

  constructor(
    private componentResolver:ComponentResolver, 
    private viewContainerRef: ViewContainerRef) {
  }

  ngOnInit() {
    this.componentResolver.resolveComponent(ColumnComponent).then((factory) => {
      let componentRef = this.target.createComponent(factory, 0, this.viewContainerRef.injector);
    });
  }
}
/**
 * TABLE
 */
@Component({
    selector: 'datatable',
    template: `
      <div #target style="border:1px solid blue;padding:5px;">
        <b>table component</b>
        <cell-component
           style="border:1px solid yellow;padding:5px;display:block">
         </cell-component>
      </div>
    `,
    directives: [ CellComponent ]
})
export class TableComponent {
}
/**
 * ROOOT APP
 */
@Component({
    selector: 'root-app',
    template: `
      <div style="border:1px solid red;padding:5px;">
        <datatable>
          <column-component [label]="'my label'">
            column content
          </column-component>
        </datatable>
      </div>
    `,
    directives: [ ColumnComponent, TableComponent ]
})
export class AppComponent {

}

Current behavior: The words 'column content' that are content of the column-component are never rendered.

Expected behavior:The inner content ( words "column content" ) of the column-component would render.


UPDATE

@GünterZöchbauer answered my orginial question ( THANKS! ), however, I applied a bit more logic and sadly it did not work. See updated plunkr: https://plnkr.co/edit/CsbmY6wePC3AWZlBDy34?p=preview

Expected Results: The cells would be repeated for each row and the value of the row's age attribute would be transposed to each.

8
  • Please add a simple demo on the plunker Commented Jun 27, 2016 at 13:56
  • What markup is "Markup" from? Commented Jun 27, 2016 at 15:08
  • @yurzui added the plunkr. Commented Jun 27, 2016 at 15:54
  • What is the expected behavior? Commented Jun 27, 2016 at 15:56
  • @GünterZöchbauer updated :) Commented Jun 27, 2016 at 16:06

1 Answer 1

1

You need to add <ng-content> to intermediate components as well

Plunker example

Sign up to request clarification or add additional context in comments.

3 Comments

That was it but once I applied some more logic, it did not work...see: plnkr.co/edit/CsbmY6wePC3AWZlBDy34?p=preview
I can't add the Plunker from my phone, but in case you are using <ng-content> with *ngFor, this is not supported.
As I assumed, you try to use <ng-content> within *ngFor. I guess you might follow github.com/angular/angular/issues/8563. As workaround you could use something like stackoverflow.com/questions/37676593/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.