Create component and append to div

Question

I have a <div> with a directive [appComponent] so I can create a component and append to it.

<div [appComponent]="component">

My directive is as follows:

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;
  private container;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.container = this.elementRef.nativeElement;
  }

  ngOnChanges(changes: SimpleChanges): void {
    const newComponent = this.renderer.createElement('new-component');
    this.renderer.appendChild(this.container, newComponent);
  }
}

And my new-component:

@Component({
  selector: 'new-component',
  templateUrl: './new-component.html',
  styleUrls: ['./new-component.scss']
})
export class NewComponent {
}

This component has contents inside. The element is created and appended to div, however, it's empty:

<div>
    <new-component _ngcontent-c3=""></new-component>
</div>

How to instantiate a component and append it to div? I'm using angular 7.

What is your expected output? Kindly give a brief about what is inside `new-component.html`... — Praveenkumar Kalidass, Apr 01 '19 at 02:45
I answer this here for standalone components https://stackoverflow.com/a/76683173/1440240 — Ben Racicot, Jul 14 '23 at 16:51

Praveenkumar Kalidass · Answer 1 · 2019-04-01T04:25:31.147

2

Try using ViewContainerRef and ComponentFactoryResolver,

let componentFactory = 
    this.componentFactoryResolver.resolveComponentFactory(NewComponent);
let componentInstance = 
    this.viewContainerRef.createComponent(componentFactory);
this.renderer.appendChild(this.container, 
    componentInstance.location.nativeElement);

edited Apr 01 '19 at 04:25

answered Apr 01 '19 at 03:13

Praveenkumar Kalidass

429
4
12

How to append it to the `
`?
– iPhoneJavaDev Apr 01 '19 at 03:19
Use `componentInstance` to render it inside the `container` – Praveenkumar Kalidass Apr 01 '19 at 03:47

score -1 · Answer 2 · 2019-04-01T04:03:23.207

You don't need the ElementRef nor the Renderer2 for this.

Try this instead:

@Directive({
  selector: '[appComponent]'
})
export class ComponentDirective implements OnChanges {
  @Input('appComponent') comp: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, public viewContainerRef: ViewContainerRef) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(NewComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.viewContainerRef.insert(componentRef.hostView);
  }
}

One important thing to mention is, to make this work you have to add NewComponent to entryComponents as follows:

@NgModule({
  imports [...],
  entryComponents: [NewComponent],
  declarations: [NewComponent, ComponentDirective, ...],
  bootstrap: [...]
})
export class AppModule { }

Here is a working example: https://stackblitz.com/edit/angular-dbszef

Create component and append to div

2 Answers2