How to dynamically create component inside child component in Angular?

Question

I am trying to implement something like light version of mat-table form Angular Material. And i can't create component inside child component. Here is some code and link to stackblitz at the end.

In some *.html file:

<table uiTable></table>

Base UiTable component:

// ui-table.component.ts

@Component({
  selector: 'table[uiTable]',
  template: `
    <thead uiTableHead></thead>
  `,
})
export class UiTableComponent implements AfterContentInit {

  @ViewChild(UiTableHeadDirective, {static: true}) 
  private tableHead: UiTableHeadDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
  ) {}

  public ngAfterContentInit() {
    const rowFactory = this.componentFactoryResolver.resolveComponentFactory(UiTableRowComponent);

    this.tableHead.viewContainer.clear();
    this.tableHead.viewContainer.createComponent(rowFactory);
  }

}

ui-table-head.directive and ui-table-row.component - just empty angular directive and component with injected ViewContainerRef.

I expect that after ngAfterContentInit is done I will get something like

<table uiTable>
    <thead uiTableHead>
        <tr uiTableRow></tr>
    </thead>
</table>

But instead of it i get

<table uiTable>
    <thead uiTableHead></thead>
    <tr uiTableRow></tr>
    <!--container-->
    <!--container-->
</table>

Why? I call createComponent method from tableHead.viewContainer, but new component creates inside uiTable. What's wrong?

Stackblitz link - https://stackblitz.com/edit/ui-table

It was historically decided that a dynamically creating component is placed next to the anchor. Anchor in your case is thead — yurzui
– yurzui, Commented Aug 7, 2020 at 13:18
@yurzui oh, ok( is there some way to create a component inside anchor? put anchor inside thead, wait for content init and call createComponent from it? Or maybe something more easy? — nilagor
– nilagor, Commented Aug 7, 2020 at 13:31

yurzui · Accepted Answer · 2020-08-07 13:36:10Z

5

You can forward your dynamically created component to children by using the following snippet:

const componentRef = this.tableHead.viewContainer.createComponent(rowFactory);
this.tableHead.viewContainer.element.nativeElement
                .appendChild(componentRef.location.nativeElement);

Forked Stackblitz

answered Aug 7, 2020 at 13:36

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically create component inside child component in Angular?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related