Add tag as input for allowing dynamic web elements loading about elements HOT 19 CLOSED

But it work!

from elements.

Fixed in 2442e60

📦 v8.6.0

Release info: https://twitter.com/tomastrajan/status/1169551355142463488

from elements.

hi @angelfraga !

That's a great use case, I was playing around with something like this, but even more dynamic where I wanted to specify tag under which will the element be registered by the directive and NOT element itself. This broke the change detection and lead to different errors.

What you propose is one step less... The element register itself as custom element with some tag as before, no change here.

But the directive will not know about that element. Definitely worth trying will have a look!

from elements.

Hi @tomastrajan, thanks for answering.
I see, anyways this library is still fine for me because I could use the service independently about how the elements are getting injected.

I am building an angular shell app which will load micro-apps (angular apps as web-elements) base on the user micro-apps configuration, but the shell itself doesn't know about which kind of micro-app or tag elements has to be injected. But each micro-app bundle is defining its own web element.
Therefore until now, I just was doing something like:

this.element.nativeElement.innerHTML = "<${microApp.definition.tag}></${microApp.definition.tag}>"

I saw your comment in the closed PR about change detection.
Maybe it sounds crazy or maybe there is a better way to do it, but I think I could define a new component on the fly for each micro-app definition which template will be filled by the micro-app tag + lazyElement directive.
Something like <${microApp.definition.tag} *axLazyElement="${microApp.definition.url} "></${microApp.definition.tag}> as on the fly component template. And then, inject via ng-template the new component reference .

What do you think about?

from elements.

Hi @angrlfraga! This sounds very interesting! I am not sure if it is possible to inject HTML containing directives and bindings like [prop] and (click) on the fly and if yes, it would probably mean we need @angular/compiler to be available during runtime but definitelly something worth exploring further!

from elements.

This could be something to investigate...

<wrapper>
  <ng-container ngProjectAs="counter">
    <counter></counter>
  </ng-container>
</wrapper>

from elements.

Hi @tomastrajan ,

First of all, thanks for giving support to this issue. 👍

You are right, the compiler is necessary, in order to create an element on the fly which template is composed by the giving tag. Like here:

<${microApp.definition.tag} *axLazyElement="${microApp.definition.url} "></${microApp.definition.tag}>

On the other hand, ngProjectAs looks interesting. If i getting good your idea, it could be something like that, right? (being definition my micro-app definition)

  <ng-container [ngProjectAs]="definition.tag">
     <div  *axLazyElement="definition.url"></div>
  </ng-container>

Definitevly it is something to be investigated.

Let say it is working, then I could do something like that:

  <ng-container *ngFor="let definition of microAppDefinitions" 
                           [ngProjectAs]="definition.tag">
     <div  *axLazyElement="definition.url" 
               [customInput]="somethingToSet"
               (customEvent)="somethingToDo()"
               (ready)="registerSomething()"></div>
  </ng-container>

from elements.

@angelfraga yes that's the idea, I didn't try it yet but was speaking with a collegue today about the topic and he pointed me towards the ngProjectAs so if you tried it and it worked I could implement it also in the library!

from elements.

@angelfraga I guess I have other solution! Have to test it a bit, but if this works is extra simple, hopefully also robust :D

from elements.

Great,
Actually I am trying out but without success.
https://stackblitz.com/edit/angular-elements-with-ngprojectas

I am just trying everything ng-template, ng-container, ng-content. One has to be the good one 😄

from elements.

I just got this to work...

 <div
              *axLazyElement="
                'https://unpkg.com/@material/[email protected]/mwc-button.js?module';
                loadingTemplate: loading;
                module: true;
                tag: 'mwc-button'
              "
              raised
              (click)="increment()"
            >
              Increment
            </div>

but have to explore bit more before adding it as a feature to make it work with Module style configuration

from elements.

Basically I overwrite (this.template as any)._def.element.template.nodes[0].element.name = this.tag; and this tag is passed in through *axLazyDIrective

but will prolly make a dedicated <ax-dynamic-lazy-component> for it instead of the <div> or <span> that way the functionality can be scoped to that without influence on anything else but lets see, will go to sleep now but will have a look tomorrow!

from elements.

Because now we support

// pre-configured LazyElementsModule
const options: LazyElementModuleOptions = {
  elementConfigs: [
    { tag: 'ion-button', url: 'https://unpkg.com/@ionic/[email protected]/dist/ionic/ionic.js' }
  ]
};

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [FeatureComponent],
  imports: [
    LazyElementsModule.forFeature(options),
  ]
})
export class FeatureModule { }

so they have to play nicely together!

from elements.

It sounds great 👍
are you working on a specific branch?

from elements.

No just changed couple of lines on local right now, will push something tomorrow, but I am getting pretty confident we can make this work!

from elements.

It sounds great 🏅

(this.template as any)._def.element.template.nodes[0].element.name = this.tag;

instead of using the tag directly as I did. (which was wrong)

const elementTag = !!this.tag ? this.tag : (this.template as any)._def.element.template.nodes[0]

let see tomorrow 😃

from elements.

Yes, we have to re-assign tag in that template node so it's rendered, the elementTag was only used for logging ;)

from elements.

Ok, looks like we will go with *axDynamicLazyElement="'tag-name'; url: 'https://whatever.com/element.js'" ... But yeah, tomorrow :D

from elements.

@tomastrajan looking that the above implementation of 2442e60, I feel that it is missing one main component, that is change of tag name is not supported. What I mean is, suppose if we have these couple of module configurations

LazyElementsModule.forRoot({
    elementConfigs: [{
      tag: 'mwc-button',
      url: 'https://unpkg.com/@material/[email protected]/mwc-button.js?module',
      isModule: true,
    }, {
      tag: 'ion-button', url: 'https://unpkg.com/@ionic/[email protected]/dist/ionic/ionic.js'
    }]
  })]

and in my template I have

<button (click)="updateTag()">Update Tag</div>
<div *axLazyElementDynamic="tagName"></div>

and when I try to update the tag, I will not be able to do it. I think its important to support it.

class MyComponent {
    tagName = 'mwc-button';

    updateTag() {
        this.tagName = 'ion-button';
   }
}

does that make sense @tomastrajan @angelfraga?

from elements.