How to place a dynamic component in a container

by

You can get the ViewContainerRef of the current component by or from an element in the view of the current component

@Component({
  selector: '...',
  directives: [OtherComponent, FooComponent],
  template: `
    <other-component></other-component>
    <foo-component #foo></foo-component>
    <div #div></div>`
})

export class SomeComponent {
  // `ViewContainerRef` from an element in the view
  @ViewChild(OtherComponent, {read: ViewContainerRef}) other;
  @ViewChild('foo', {read: ViewContainerRef}) foo;
  @ViewChild('div', {read: ViewContainerRef}) div;

  // `ViewContainerRef` from the component itself
  constructor(private viewContainerRef:ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {}

  let factory = this.componentFactoryResolver.resolveComponentFactory(ControlBox)
  this.componentRef = this.other.createComponent(factory);
  // this.componentRef = this.foo.createComponent(factory);
  // this.componentRef = this.div.createComponent(factory);
  // this.componentRef = this.viewContainerRef.createComponent(factory);
  });
}

See also Angular 2 dynamic tabs with user-click chosen components

More Related Contents:

  1. Expression ___ has changed after it was checked
  2. *ngFor running an infinite loop in angular2
  3. Angular 2 @ViewChild annotation returns undefined
  4. How to get query params from url in Angular 2?
  5. How to return value from function which has Observable subscription inside?
  6. Define global constants
  7. How to inject Document in service?
  8. When I refresh my website I get a 404. This is with Angular2 and firebase
  9. Angular 2 Show and Hide an element
  10. WARNING: sanitizing unsafe style value url
  11. Angular2: How to load data before rendering the component?
  12. Extending component decorator with base class decorator
  13. How can I listen for keypress event on the whole page?
  14. How to display json object using *ngFor
  15. How to avoid imports with very long relative paths in Angular 2?
  16. Select based on enum in Angular2
  17. Angular no provider for NameService
  18. Angular2 – Share data between components using services
  19. Accessing a property in a parent Component
  20. TypeScript error in Angular2 code: Cannot find name ‘module’
  21. angular2 bootstrap with data from ajax call(s)
  22. Visual Studio Code Automatic Imports
  23. Get route query params
  24. RxJs get value from observable
  25. How to create an Observable from static data similar to http one in Angular?
  26. Angular2 – root relative imports
  27. RxJs Array of Observable to Observable of Array
  28. Angular2 HTTP GET – Cast response into full object
  29. detect change of nested property for component input
  30. How to deal with http status codes other than 200 in Angular 2

Leave a Comment