Runtime loading of element based on user action

[hardikpatel043]

I have an angular app which has two apps and one shell app.

Micro app : home and aboutus Shell app : cz-app

In shell app I have one page (contactus) where I have a drop-down with two values (home and aboutus). Now I want to load an element just below drop-down based on selection value.

I tried to use axLazyElementDynamic and updated configuration on valueChange, but it didn't work.

I tried manually triggering change detection by "this.cdr.detectChanges()". It didn't help me.

Here is my github repo.

Could anyone please check given repo.

Note - both microapps are working fine on separate route.

[gs-smuthyam]

Hi @hardikpatel043,

I'm just trying to through some knowledge that I have experienced with. Below is an approach you can evaluate

1. Have parent component keeping the dropdown that you are referring to as changing the value run time.
2. Keep ng container as reference to the lower part that you want to change the component dynamically.
3. Keep the axLazyElement inside of another component and accept URL as an input.
4. Destroy the children from #step2 above if present and add the newly initialised component (using ComponentFactoryResolver).

To my understanding this lib is meant to allow you to define the placeholder where the script file can be loaded on demand. Keeping this additional logic inside of the lib makes it clumsy too.

NOTE: This input is purely based on my understanding of the problem

[tomastrajan]

Hi @hardikpatel043 !

Would this work ?

<ng-container *ngIf="selection === 'about-us'">
      <cz-about-us-element *axLazyElement="url"></cz-about-us-element>
</ng-container>

<ng-container *ngIf="selection === 'contact-us'">
      <cz-contact-us-element *axLazyElement="other-url"></cz-contact-us-element>
</ng-container>

Cheers!

[lbilger]

I came across a similar issue, though in my case the possible elements are not known at compile time, so the workaround proposed by @tomastrajan wouldn't work for me.

What seems to work is wrapping the *axLazyElementDynamic component in an *ngFor component like this:

<ng-container *ngIf="formSpec$ | async; let formSpec">
  <ng-container *ngFor="let formSpec of [formSpec]">
    <ax-lazy-element *axLazyElementDynamic="formSpec.elementName, url: formSpec.url"></ax-lazy-element>
  </ng-container>
</ng-container>

This seems to force re-creation of the inner component whenever the formSpec changes. I'm an Angular noob so maybe there's a nicer way to do this that I'm not aware of.

The problem seems to be that the axLazyElementDynamic directive cannot react to changes of the tag or url. Or maybe I'm just holding it wrong?