Pass attributes to dynamic component

[nickbullock]

Hi! Thank you for this library.
How can i pass attributes(class for example) to dynamic components?

<ndc-dynamic [ndcDynamicComponent]="component"
                 [ndcDynamicInputs]="inputs"
                 [ndcDynamicOutputs]="outputs"
                 [classForDynamicComponent]="???"
    >
    </ndc-dynamic>

[gund]

Well unfortunately right now you have to do it yourself imperatively (not via html).

And the way you can set attributes is by using <ndc-dynamic> component to inject dynamic component and then grabbing it's reference in your host component via @ViewChild and then using it's componentRef public property which in turn will have location property of type ElementRef.

Than that can be used along with Renderer2 to set classes etc.

So here's example:

import { DynamicComponent } from 'ng-dynamic-component';

@Component({
  selector: 'my-component',
  template: `
    <ndc-dynamic [ndcDynamicComponent]="dynamicComp"></ndc-dynamic>
`
})
export class MyComponent implements AfterViewInit {
  dynamicComp = SomeComponent;
  @ViewChild(DynamicComponent) ndcDynamic: DynamicComponent;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const dynamicElementRef = this.ndcDynamic.componentRef.location;
    this.renderer.setClass(dynamicElementRef.nativeElement, 'my-class');
  }
}

NOTE: You have to set your dynamic class only AfterViewInit because that's when angular will provide you requested ViewChild (it will not be set in OnInit hook).

[gund]

I think this is actually a pretty useful thing to be able to set attributes, and it would be really cool to be able to do so declaratively.

I have an idea how to make it possible to set via directive but will have do some experiments to validate because it should not be tied to neither <ndc-dynamic> nor DynamicDirective.

That way you can simply apply it on ngComponentOutlet without anything else =)

[gund]

Btw for the time being you can create a more usable solution for yourself.

You can extend DynamicComponent with new component that will additionally accept a set of attributes and internally assign them using the method I described above.

And then when you import DynamicModule just pass new component as a second argument to withComponents() method so that it will be used instead of default <ndc-dynamic>.

[nickbullock]

Thank you sir!

[gund]

Hey @nickbullock, if you want you can try a new directive added in new release that will allow to set attributes right from your templates.

Let me know how it works for you =)