Reputation: 53
I am doing a proof of concept with the following criteria:
I made an example using Angular elements, extending the HTML.
Each angular team makes its deploy by generating a JavaScript file (team1.js, team2.js, team3.js) by registering its tag.
Example:
<team1> </ team1> customElements.define("team1", ....);
<team2> </ team2> customElements.define("team2", ....);
<team3> </ team3> customElements.define("team3", ....);
The main Angular application, which has the menu, imports the JavaScript files (team1.js, team2.js, team3.js) and, when clicking on each menu, the tag is dynamically created inside the div main.
menu team1 >> this.renderer.createElement ("team1")
menu team2 >> this.renderer.createElement ("team2")
menu team3 >> this.renderer.createElement ("team3")
If any team needs to access a webservice to populate a table for example, the table is rendered before.
So I do the request in the webservice and then I create the table tag dynamically and I pass the parameter to popular.
In an Angular project it works normally without this need. But with Angular elements I just got that way:
this.data = data returned from webservice
const element = this.renderer.createElement ("component-table");
this.renderer.setProperty (element, "data", this.data);
All this works, but I find it difficult to work with createElement.
I could make this webservice request in the main project and go through parameter:
<team1 data = "data"> </ team1>
With this for all requests to the webservice would be in the main project and all teams would have to code in this project.
Upvotes: 2
Views: 4084