Angular 8 - Rearrange dynamically created components via drag and drop

114
January 10, 2020, at 11:30 AM

I am currently creating a dynamic questionnaire builder where the user can choose from a list of input fields(e.g textbox, checkbox). I am creating the input fields dynamically via ComponentFactoryResolver. My problem is when I rearrange the created components via drag and drop the components doesnt rearrange themselves properly.

I tried following this cdkDropList with ng-template on dynamic component list do'snt work. but we have the same issue.

I am creating the components like this public addField(questionnaireComponent: any): void {

    const formFieldComponentFactory = 
    this.componentFactoryResolver.resolveComponentFactory(questionnaireComponent);
    this.componentRef = 
    this.formQuestionnaireRef.createComponent(questionnaireFieldComponentFactory);
    this.localDragRef.push(this.componentRef.instance.dragEnable(this.dragDrop));
    this.droplistREf.withItems(this.localDragRef);
  }

subscribe when the component is dropped

       this.droplistREf = this.dragDrop.createDropList(this.fieldList);
       this.droplistREf.dropped.subscribe(a => {
         // cant get the componentRef here to rearrange component
       });
     } 

my code that rearrange the position of dynamic components

 public rearrangeQuestionnairePosition(): void {
    this.formQuestionnaireRef.move(this.componentInstance.hostView, componentPosition);
  }

the problem is I cant use the rearrangeQuestionnairePosition function to rearrange the dynamically created components since I dont have the instance of the componentRef

IM using the drag and drop of angular material btw

READ ALSO
How to get two queries from firestore?

How to get two queries from firestore?

I use redux and want to know how to take and process two queries from firesotre

148
Initialize using patchValue for template driven forms

Initialize using patchValue for template driven forms

I use template driven and am trying to initialize my form using patchValue and it is not working

144
Re-posting <input> value into <textarea>

Re-posting <input> value into <textarea>

I want to re-generate user's input values onto textarea with specific formatI've created input and 'select' with various 'options' inside as well as 'button' that triggers the function

86
currently no loaders are configured to process this file form vuepress

currently no loaders are configured to process this file form vuepress

I want to import third-party libraries went I use the vuepressI should config a rule to compile node_modules js file

328