Dynamic component

frontend/src/app/modules/wizard/wizard-b/invite-user-wizard-component-b.component.ts

@@ -35,13 +35,9 @@ import {StateService} from "@uirouter/core";
 import {BoardService} from "core-app/modules/boards/board/board.service";
 import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-actions/board-actions-registry.service";
 import {HalResourceNotificationService} from "core-app/modules/hal/services/hal-resource-notification.service";
-import {FormControl, FormGroup, Validators} from "@angular/forms";
-
-export enum STEPS {
-  NAME = 1,
-  EMAIL = 2,
-  COMPLETE = 3
-}
+import {STEPS} from "core-app/modules/wizard/wizard-b/steps/step-definitions";
+import {UserNameStepComponent} from "core-app/modules/wizard/wizard-b/steps/user-name-step.component";
+import {UserEmailStepComponent} from "core-app/modules/wizard/wizard-b/steps/user-email-step.component";
 
 @Component({
   templateUrl: './invite-user-wizard.component.html'
@@ -57,6 +53,11 @@ export class InviteUserWizardComponentB extends OpModalComponent implements OnIn
   // Current designated next step upon confirmation
   nextStep:STEPS;
 
+  componentSteps = {
+    [STEPS.NAME]: UserNameStepComponent,
+    [STEPS.EMAIL]: UserEmailStepComponent
+  };
+
   // Whether the form control is valid
   public valid:boolean;
 
@@ -68,6 +69,11 @@ export class InviteUserWizardComponentB extends OpModalComponent implements OnIn
     button_close: 'Close'
   };
 
+  public referenceOutputs = {
+    onSubmit: () => this.advance(),
+    statusChanges: ($event:string) => this.setValid($event),
+    nextStep: ($event:STEPS) => this.nextStep = $event,
+  };
 
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,

frontend/src/app/modules/wizard/wizard-b/invite-user-wizard.component.html

@@ -16,18 +16,13 @@
     </div>
 
     <div class="ngdialog-body op-modal--modal-body">
-      <invite-user-name-step
-        *ngIf="currentStep === steps.NAME"
-        (statusChanges)="setValid($event)"
-        (nextStep)="nextStep = $event"
-        (onSubmit)="advance()"
-      ></invite-user-name-step>
-      <invite-user-email-step
-        *ngIf="currentStep === steps.EMAIL"
-        (statusChanges)="setValid($event)"
-        (nextStep)="nextStep = $event"
-        (onSubmit)="advance()"
-      ></invite-user-email-step>
+      <ng-container *ngFor="let item of componentSteps | keyvalue">
+        <ndc-dynamic
+          *ngIf="item.key == currentStep"
+          [ndcDynamicComponent]="item.value"
+          [ndcDynamicOutputs]="referenceOutputs">
+        </ndc-dynamic>
+      </ng-container>
       <p
         *ngIf="currentStep === steps.COMPLETE"
       >

frontend/src/app/modules/wizard/wizard-b/steps/step-definitions.ts

@@ -0,0 +1,6 @@
+// Available steps
+export enum STEPS {
+  NAME = 1,
+  EMAIL = 2,
+  COMPLETE = 3
+}

frontend/src/app/modules/wizard/wizard-b/steps/user-email-step.component.ts

@@ -28,9 +28,9 @@
 
 import {Component, EventEmitter, Output} from "@angular/core";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {STEPS} from "core-app/modules/wizard/wizard-b/invite-user-wizard-component-b.component";
 import {of} from "rxjs";
 import SubmitEvent = JQuery.SubmitEvent;
+import {STEPS} from "core-app/modules/wizard/wizard-b/steps/step-definitions";
 
 
 @Component({

frontend/src/app/modules/wizard/wizard-b/steps/user-name-step.component.ts

@@ -26,19 +26,11 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
-import {OpModalComponent} from "core-components/op-modals/op-modal.component";
-import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, OnInit, Output} from "@angular/core";
-import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
-import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {StateService} from "@uirouter/core";
-import {BoardService} from "core-app/modules/boards/board/board.service";
-import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-actions/board-actions-registry.service";
-import {HalResourceNotificationService} from "core-app/modules/hal/services/hal-resource-notification.service";
+import {Component, EventEmitter, Output} from "@angular/core";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {STEPS} from "core-app/modules/wizard/wizard-b/invite-user-wizard-component-b.component";
 import {of} from "rxjs";
 import SubmitEvent = JQuery.SubmitEvent;
+import {STEPS} from "core-app/modules/wizard/wizard-b/steps/step-definitions";
 
 
 @Component({