CODEWITHSUNDEEP
angular
amcdnl
amcdnl

Reputation: 8638

Angular2 ComponentResolver and ng-content not rendering

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.

Upvotes: 3

Views: 2299

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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

Plunker example

Upvotes: 1

Related Questions