-
Notifications
You must be signed in to change notification settings - Fork 41
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add tag as input for allowing dynamic web elements loading #5
Comments
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! |
Hi @tomastrajan, thanks for answering. 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.
I saw your comment in the closed PR about change detection. What do you think about? |
Hi @angrlfraga! This sounds very interesting! I am not sure if it is possible to inject HTML containing directives and bindings like |
This could be something to investigate...
|
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
On the other hand,
Definitevly it is something to be investigated. Let say it is working, then I could do something like that:
|
@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 |
@angelfraga I guess I have other solution! Have to test it a bit, but if this works is extra simple, hopefully also robust :D |
Great, I am just trying everything ng-template, ng-container, ng-content. One has to be the good one 😄 |
I just got this to work...
but have to explore bit more before adding it as a feature to make it work with Module style configuration |
Basically I overwrite but will prolly make a dedicated |
Because now we support
so they have to play nicely together! |
It sounds great 👍 |
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! |
It sounds great 🏅
instead of using the tag directly as I did. (which was wrong)
let see tomorrow 😃 |
Yes, we have to re-assign tag in that template node so it's rendered, the |
Ok, looks like we will go with |
But it work! |
Fixed in 2442e60 📦 v8.6.0 Release info: https://twitter.com/tomastrajan/status/1169551355142463488 |
@tomastrajan looking that the above implementation of LazyElementsModule.forRoot({
elementConfigs: [{
tag: 'mwc-button',
url: 'https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module',
isModule: true,
}, {
tag: 'ion-button', url: 'https://unpkg.com/@ionic/core@4.6.2/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? |
Hi, great job.
You save my day 🥇 but I think a new feature can be added.
Correct me if I am wrong but I think there is a case the library is not covering.
If we are in a shell app, and we want to load several micro-apps (web-elements) dynamically based on an incoming config, the shell shouldn't know about future tag elements.
For example, having this config as available micro-apps/widgets:
If we add a new input (tag) to the
lazy-element.directive.ts
, we could replace the original tag by the giving tag.elements/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
Line 29 in 35575a7
The usage could look like this:
Being converted to
At least, in my case, the shell app code doesn't know about the incoming config and tag elements and therefore I still have to inject the micro-apps using script elements.
The text was updated successfully, but these errors were encountered: