Creating an angular2 component with ng-content dynamically

by

There is the projectableNodes parameter for the vcRef.createComponent method

createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;

You can use it to dynamically inject one component into another.

Let’s say we have the following component

@Component({
    selector: 'card',
    template: `
        <div class="card__top">
            <h2>Creating a angular2 component with ng-content dynamically</h2>
        </div>
        <div class="card__body">
            <ng-content></ng-content>
        </div>
        <div class="card__bottom">
            <ng-content></ng-content>
        </div>
    `
})
export class CardComponent {}

We want to create it dynamically and insert some controls to its ng-content locations. It could be done like follows:

const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);

let bodyRef = this.vcRef.createComponent(bodyFactory);
let footerRef = this.vcRef.createComponent(footerFactory);

const cardFactory = this.cfr.resolveComponentFactory(CardComponent);

const cardRef = this.vcRef.createComponent(
    cardFactory,
    0,
    undefined,
    [
        [bodyRef.location.nativeElement],
        [footerRef.location.nativeElement]
    ]
);

Plunker Example

See also

More Related Contents:

  1. How can I select an element in a component template?
  2. What is the equivalent of ngShow and ngHide in Angular 2+?
  3. Call child component method from parent class – Angular
  4. Angular 2 ‘component’ is not a known element
  5. How to rename a component in Angular CLI?
  6. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  7. Angular 2 – how round calculated number?
  8. Angular/RxJS When should I unsubscribe from `Subscription`
  9. Is it necessary to unsubscribe from observables created by Http methods?
  10. Dynamically add event listener
  11. How to iterate object keys using *ngFor
  12. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  13. How to use `trackBy` with `ngFor`
  14. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  15. Angular and Typescript: Can’t find names – Error: cannot find name
  16. Angular 2 Scroll to top on Route Change
  17. Angular 4 validator to check 2 controls at the same time
  18. vs
  19. Multiple conditions in ngClass – Angular 4
  20. angular4 httpclient csrf does not send x-xsrf-token
  21. Angular 2 Basic Authentication not working
  22. How do I get the absolute path of the current page in Angular 2?
  23. Property ‘json’ does not exist on type ‘Object’
  24. How to use variable to define templateUrl in Angular2
  25. ‘node-sass’ usage is deprecated and will be removed in a future major version
  26. Angular 4 Lazy loading with named router-outlet not working
  27. ::ng-deep going to be deprecated – Any alternatives?
  28. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  29. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  30. Custom Exception Handler in Angular2

Leave a Comment