Angular2 DynamicComponentLoader

Question

Using any method (ex. loadIntoLocation) I can dynamically load a directive into my basic component to a specific container !

@Component({ ... template: ` <div #elementContainer>empty div</div>` ...})

then by calling

this._dcl.loadIntoLocation(DirectiveClass, this._elementRef, 'elementContainer')

I will pass to the empty div the template of a DirectiveClass like:

<input type="radio" name="gender" value="male" checked>

so the final result will be an empty div plus my input element!

The question is: how to change the value attribute or any other of the input value also dynamically by calling loadIntoLocation ?

Answer 1

update

loadIntoLocation() was removed from DynamicComponentLoader. Use instead loadNextToLocation() with ViewContainerRef

export class AppComponent {
  @ViewChild('target', {read: ViewContainerRef}) target;
  top;

  constructor(private dcl:DynamicComponentLoader) {}
  ngAfterViewInit() {
    this.dcl.loadNextToLocation(DynamicComponent, this.target)
    .then(ref => {
      ref.instance.someEvent
      .subscribe(value => {
        this.top = value.clientX; 
      })
    });
  }
}

Plunker example beta.16

original

This looks quite similar to Angular 2 - How to set id attribute to the dynamically loaded component that I recently answered

You don't explain how you add the input.

this.dcl.loadIntoLocation(DirectiveClass, this._elementRef, 'elementContainer').then((cmp) => {
  cmp.location.nativeElement.querySelector('input').value = 'someId';
});

might do what you want (not tested).