0

I am using Angular2 Dart 3.1.0. I am dynamically loading a component, and I want to know if there is a way to input what would go into <ng-content></ng-content>. I am dynamically loading a third-party component so I cannot replace the ng-content usage.

I have put together a simplified example of my current implementation:

import 'dart:async';

import 'package:angular2/angular2.dart';

@Component(
    selector: 'dynamic-component',
    template: '''<div class="header">{{header}}</div>
                 <div><ng-content></ng-content></div>
                 <div class="footer">{{footer}}</div>''')
class DynamicComponent {
  @Input()
  String header;

  @Input()
  String footer;
}


@Component(
    selector: 'wrapper-component',
    template: '')
class WrapperComponent {
  final ViewContainerRef _viewContainerRef;
  final ComponentResolver _componentResolver;

  WrapperComponent(this._viewContainerRef, this._componentResolver);

  Future renderDynamicComponent() async {
    var componentFactory = await _componentResolver.resolveComponent(DynamicComponent);
    ComponentRef<DynamicComponent> componentRef = _viewContainerRef.createComponent(componentFactory);
    componentRef.instance
      ..header = header
      ..footer = footer;
  }
}
Sam B
  • 187
  • 12
  • Refer to this [**medium post**](https://medium.com/@aravindfz/load-modal-component-dynamically-in-angular-5fda8e1dc3e7) of typescript version. – Aravind Aug 04 '17 at 20:07
  • 1
    Please take a look at similar question https://stackoverflow.com/questions/44284026/creating-a-angular2-component-with-ng-content-dynamically – yurzui Aug 04 '17 at 20:16
  • @RandalSchwartz I am the OP, and I agree this is a duplicate. The Typescript implementation is exactly the same as the Dart implementation. You need to use the `projectableNodes` argument of `ViewContainerRef.createComponent`. – Sam B Aug 06 '17 at 03:57

0 Answers0