Angular2: Insert a dynamic component as child of a container in the DOM

by

TL;DR: replace <div #placeholder></div> with <div><ng-template #placeholder></ng-template></div> to insert inside the div.

Here is a working stackblitz example (Angular 6), and the relevant code:

@Component({
  selector: 'my-app',
  template: `<div><ng-template #container></ng-template></div>`
})
export class AppComponent implements OnInit {

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

    constructor(private compiler: Compiler) {}

    ngOnInit() {
      this.createComponentFactory(MyDynamicComponent).then(
        (factory: ComponentFactory<MyDynamicComponent>) => this.viewContainer.createComponent(factory),
        (err: any) => console.error(err));
    }

    private createComponentFactory(/*...*/) {/*...*/}

}

It seems <ng-container #placeholder></ng-container> is also working (replace ng-template by ng-container). I like this approach because <ng-container> is clearly addressed to this usecase (a container that don’t add a tag) and can be used in other situations like NgIf without wrapping in a real tag.

PS: @GünterZöchbauer directed me to the right discussion in a comment, and I finally answered my own question.

Edit [2018-05-30]: Updated to stackblitz link to have a working, up-to-date example.

More Related Contents:

  1. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  2. How to detect a route change in Angular?
  3. How can I use “*ngIf else”?
  4. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  5. Angular2 change detection: ngOnChanges not firing for nested object
  6. How to go back last page
  7. Difference between [ngClass] vs [class] binding
  8. Angular Subscribe within Subscribe
  9. How to store token in Local or Session Storage in Angular 2?
  10. How to use [(ngModel)] on div’s contenteditable in angular2?
  11. How can I conditionally disable the routerLink attribute?
  12. Cannot read property ‘push’ of undefined(…) in angular2
  13. When to use square brackets [ ] in directives @Inputs and when not?
  14. Angular2 – Interaction between components using a service
  15. Angular2: How is ngfor expanded
  16. Angular 2: Iterate over reactive form controls
  17. Can’t reload/refresh active route
  18. Error trying to diff ‘[object Object]’ in Angular
  19. Error: supportsScrollBehavior is not declared configurable
  20. Differences between value and ngValue in Angular 5
  21. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  22. Docker container doesn’t reload Angular app
  23. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  24. NX MFE angular module federation not able to access remote micro front end
  25. What is the lifecycle of a service in Angular 5
  26. Conditionally apply click event in Angular 4
  27. Angular4 APP_INITIALIZER won’t delay initialization
  28. Angular load external configuration before AppModule loads
  29. Firestore Error: The query requires an index
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment