feat(directive): Added component creation event

README.MD

@@ -83,6 +83,25 @@ class MyDynamicComponent1 {
 Here you can update your inputs (ex. `inputs.hello = 'WORLD'`) and they will trigger standard Angular's life-cycle hooks
 (of course you should consider which change detection strategy you are using).
 
+### Component Creation Events
+
+You can subscribe to component creation events, being passed a reference to the `ComponentRef`:
+
+```ts
+@Component({
+  selector: 'my-component',
+  template: `<ndc-dynamic [ndcDynamicComponent]="component"
+                          [ndcDynamicCreated]="componentCreated($event)"
+                          ></ndc-dynamic>`
+})
+class MyComponent {
+  component = MyDynamicComponent1;
+  componentCreated(compRef: ComponentRef<any>) {
+    // utilize compRef in some way ...
+  }
+}
+```
+
 ### Attributes
 
 **Since v2.2.0** you can now declaratively set attributes, as you would inputs, via `ndcDynamicAttributes`:

src/dynamic/dynamic.component.spec.ts

@@ -1,5 +1,6 @@
 import {
   Component,
+  ComponentRef,
   InjectionToken,
   Injector,
   NO_ERRORS_SCHEMA,
@@ -26,6 +27,7 @@ describe('DynamicComponent', () => {
     let testTemplate = `<ndc-dynamic [ndcDynamicComponent]="component"
                                    [ndcDynamicInjector]="injector"
                                    [ndcDynamicProviders]="providers"
+                                   (ndcDynamicCreated)="createdComponent($event)"
                                    [ndcDynamicContent]="content"></ndc-dynamic>`;
     let fixture: ComponentFixture<TestComponent>, createComp = true;
 
@@ -60,6 +62,13 @@ describe('DynamicComponent', () => {
         expect(injectedElem.componentInstance).toEqual(jasmine.any(InjectedComponent));
     });
 
+    it('should emit event when component created', () => {
+        fixture.componentInstance.component = InjectedComponent;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.comp.instance).toBeInstanceOf(InjectedComponent);
+    });
+
     it('should clear view if [ndcDynamicComponent] becomes null', () => {
         fixture.componentInstance.component = InjectedComponent;
         fixture.detectChanges();
@@ -181,7 +190,13 @@ class TestComponent {
     providers: Provider[];
     content: any[][];
 
+    comp: ComponentRef<any>;
+
     @ViewChildren(TemplateRef) tplRefs: QueryList<TemplateRef<any>>;
 
     constructor(public vcRef: ViewContainerRef) { }
+
+    createdComponent(comp: ComponentRef<any>) {
+        this.comp = comp;
+    }
 }

src/dynamic/dynamic.component.ts

@@ -3,9 +3,11 @@ import {
   Component,
   ComponentFactoryResolver,
   ComponentRef,
+  EventEmitter,
   Injector,
   Input,
   OnChanges,
+  Output,
   Provider,
   ReflectiveInjector,
   SimpleChanges,
@@ -24,6 +26,8 @@ export class DynamicComponent implements OnChanges, ComponentInjector {
   @Input() ndcDynamicProviders: Provider[];
   @Input() ndcDynamicContent: any[][];
 
+  @Output() ndcDynamicCreated: EventEmitter<ComponentRef<any>> = new EventEmitter();
+
   componentRef: ComponentRef<any> | null;
 
   constructor(
@@ -46,6 +50,7 @@ export class DynamicComponent implements OnChanges, ComponentInjector {
         this._cfr.resolveComponentFactory(this.ndcDynamicComponent),
         0, this._resolveInjector(), this.ndcDynamicContent
       );
+      this.ndcDynamicCreated.emit(this.componentRef);
     }
   }