Creating dynamic angular 8 components and html element and rearranging them

Question

I have the following problem. I have an array with angular 8 component names and html elements. Currently it is creating the angular 8 components and the html elements but does not arrange them like they are sorted in the array. This is my code:

for (var i = 0; i < res.length; i++) {
            var val = res[i];
            if (val.value.Type) {
                //Getting the factory for the component
                const factories = Array.from(this.resolver['_factories'].keys());
                const factoryClass = <Type<any>>factories.find((x: any) => x.name === val.editor.alias);

                const factory = this.resolver.resolveComponentFactory(factoryClass);
                //Creating the component
                this.Container.createComponent(factory);
            } else {
                this.$Element.append(val.value);
            }
}

My DOM looks the following

The angular components always get inserted directly after the .content div. I already tried using Container.insert but it does not work either.

create a dummy div container and createComponent in that div container than use that div container to insert in this.Container — xdeepakv, Feb 19 '20 at 09:10

score -1 · Answer 1 · answered Feb 20 '20 at 08:35

To add your dynamic created component to the DOM you can use JQuery:

const factory = this.resolver.resolveComponentFactory(factoryClass);
//Creating the component
var component = factory.create(this.Container.parentInjector);
//Appending the component node to the register element
this.Container.insert(component.hostView);
this.$RootElement.parent().append(component.hostView["rootNodes"][0]);

This will create the element and insert the html tags with JQuery

Creating dynamic angular 8 components and html element and rearranging them

1 Answers1