lazy-in-for

[janstadt]

Workaround to make the dynamic component work correctly in ngFor. Still have to test this out with requests that take longer than others.

[tomastrajan]

@janstadt amazing thank you! please let me know ASAP and I will merge and release it!

[tomastrajan]

Couldn't it help to clone the element so that when we change the tag, we're changing it only for this one particular element and not every similar element ?

[janstadt]

Yeah that would be helpful, although im not 100% sure thats the issue and i wasnt completely sure how to create a new TemplateRef from scratch. Its abstract so i cant instantiate a new one and when its injected im not sure how angular is handling that. The TemplateRef seems to be the key though.

So from what i am following in the code, the reason why you've decided to swap out the tag name is because then that element will still have the inputs/outputs that are needed for the web component to bind appropriately to the container component. Instead of changing the tag name, could we just add another html element to the dom and loop through the current elements attributes to get all the bindings?

FYI, this PR didnt work completely. I added more test elements (it worked with 2) to the array but still have the race condition. Will keep looking into a solution.

[tomastrajan]

@janstadt would try to prevent introducing such logic as manual bindings behind the scene cuz that would be prolly very fragile... So what about the case of looping over X elements which are the same with same bindings, works ? Also for cloning I only thought about the last .element object not the whole this.template ? Could help ?

[janstadt]

@tomastrajan im not sure thats possible. Im running out of ideas. I might be able to just use the other non dynamic loader with a bunch of if checks based on the user response for which modules they have access to. Clearly not optimal but would get me past this issue. It seems like there should be an easier way to do this but it doesnt seem that straight forward. I did try to create a new element like this:

const axLazy = this.template.elementRef.nativeElement.nextSibling;
var newElement = document.createElement(this.tag);
        
        for(let i = 0; i < axLazy.attributes.length; i++) {
            const item = axLazy.attributes.item(i);
            newElement.setAttribute(item.nodeName, item.nodeValue);
        }

        this.renderer.removeChild(this.template.elementRef.nativeElement.parentElement, axLazy);
        this.renderer.appendChild(this.template.elementRef.nativeElement.parentElement, newElement);

At one point nextSibling was valued as the actual ax-lazy-element but now its always null due to the fact that the template hasnt been completely rendered at the time of the check which is unfortunate. Not sure how i was able to get it to be valued but it must have been some weird race condition yet again. Let me know if you are able to get anything working.

Thanks!

[tomastrajan]

Was solved in other PR, thx for the feedback!