Questions tagged [angular-elements]

Angular Elements compiles Angular Components into framework-agnostic Web Components.

Angular Elements compiles Angular Components into regular Web Components, which can be used outside of Angular, in any framework, such as React, or just in regular HTML.

301 questions
0
votes
0 answers

Angular elements microfrontend resource path

I have several Angular applications, each of which is included in a shell as a microfrontend. This is described in the Angular Architects Blog. The integration of the individual microfrontends into the shell works without any problems. For example,…
0
votes
1 answer

Angular Elements: Get a reference to host web component element

When using Angular Elements, we'd usually have something like this to build an app as a web component: export class AppModule implements DoBootstrap { ngDoBootstrap(appRef: ApplicationRef): void { customElements.define('foo',…
yktoo
  • 2,696
  • 1
  • 23
  • 35
0
votes
0 answers

Angular Custom Elements - How to pass in forRoot() from external application?

In Angular custom Elements, how to pass in .forRoot() from external application? https://stackblitz.com/edit/github-ahxfy9?file=projects%2Fclick-tracker-element%2Fsrc%2Fapp%2Fapp.module.ts
Dinesh
  • 1,711
  • 2
  • 20
  • 41
0
votes
0 answers

Pass parameter component from Angular component to custom element,render this component in cuntom element,Angular 12

I pass parameter component to angular element ,and I want to render this component in this custom element. Here is the code for the target repository, which uses element
0
votes
0 answers

How can I build a secondary entry point as angular element?

So, I have an angular lib, this lib has two secondary entry point components that I want to publish as angular elements so that I can import @project/lib/component1 and @project/lib/component2. I have the entry points configured this way: projects │…
dazzed
  • 643
  • 2
  • 9
  • 19
0
votes
1 answer

send param to Angular Element from Master App (Micro FrontEnd)

i make a small angular application and convert it into angular element to use it as a micro frontend in other master App and it looks great and works fine. but I need to pass a value from Master App to the Micro App but didn't work with me. can…
Amr Eshra
  • 21
  • 5
0
votes
1 answer

Angular Elements does not work with Primeng

Description I'm trying to create an Angular Elements using Primeng components. When I run the Angular app everything works just fine. However, once I build and use my Angular Elements containing my Primeng button component, it breaks. This is what…
0
votes
0 answers

Angular web component directive its not working

I am trying to convert angular components to angular web component, I followed few articles to do it which is good, but when I tried to convert angular directive as web component it throws some error which I am not able to figure out what is wrong I…
0
votes
1 answer

Emitted number from Angular Element turns into string when reaching javascript event listener

I have created a web component in Angular Elements which defines and emits events like this: @Input() groupId: number = -1; @Output('group_change') groupChange!: EventEmitter; ... this.groupChange.emit(groupId); I have added the web…
Frank Jusnes
  • 175
  • 1
  • 13
0
votes
1 answer

Angular Web Component routing reroutes to last component routed when we get back to the web component

We have built a web component with angular elements and consumed in a parent angular application. But the problem seems to be with the web component routing. It seems that the last loaded component loads up irrespective of the current url. Now go…
Vipin Jain
  • 1,382
  • 1
  • 10
  • 19
0
votes
1 answer

Angular element with Hot Module Replacement causing duplicated customElements.define

In my DoBootstrap, I setup the Angular element with const webComponentTag = 'ui-button' customElements.define(webComponentTag, createCustomElement(UIButtonComponent, {injector})); Note there is no way to remove a definition from registered…
0
votes
1 answer

Angular elements multiple APIs and different stages - proxy.config vs another aproach

Currently I'm building an Angular App using angular elements and have 3 environments: dev stage prod the API calls are different for every environment. Using proxy.config.js and router option it would be something like: { "/api/products": { …
DeanTwit
  • 325
  • 4
  • 8
0
votes
0 answers

Angular directives to be added from the Angular component instead from the template

I am wondering if directives like ngModel can be added from the component, after template is initialized.
0
votes
1 answer

Micro Frontend Angular 11 Destroy Issue

Overview Micro-Frontend that are developed using Angular-Elements can be either of the two types below. Single Page or widget Micro-Frontend (Microapp-A) Multi Page Micro-Frontend (Microapp-B) Problem Statement In Micro-Frontend with multiple…
0
votes
1 answer

How to load an element component with a string in Angular 2

I created an angular element that I can call via an url like this: http://localhost:8080/elements/ExampleElement.js This element holds a component, that I want to use in another application. In my application where I want to call the component, I…