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
2
votes
2 answers

How to share code between a regular Angular component and an Angular Element?

Lets assume that I'll use nx to be able to share libraries between different sites in a mono repo. I have two sites: Site 1: Angular App Site 2: Static Site Site 1 has a helloWorld Angular Component. On site 2 I want to use the helloWorld…
edt
  • 22,010
  • 30
  • 83
  • 118
2
votes
0 answers

CSS is not applies properly to the Angular Element (web component) inside Shadow DOM

I have micro-frontend architecture. A main application that turns out into the Angular Element with Shadow DOM. A lot of small projects that turns out into the Angular Elements without Shadow DOM (ViewEncapsulation.Emulated). Inside the main…
2
votes
0 answers

Angular web-component is registered twice

I created an Angular 10 webelement component and registered it to NgModule like this: export class AppModule implements DoBootstrap { constructor(private injector: Injector) {} ngDoBootstrap(appRef: ApplicationRef) { const element…
2
votes
0 answers

How to share external libraries between multiple angular elements

I'm currently working with Angular Elements and more specifically trying to make multiple Elements communicate and interact with each other. In my case, the two elements I am trying to create share an external library (ag-grid) which enables them to…
2
votes
0 answers

Best practice maintaining Angular project with Angular Elements

I maintain Angular project, which is a kind of component library / framework, with components that will be reused by other projects. All projects now are written in Angular, but my team's components must be available also for other platforms (eg.…
Tschareck
  • 4,071
  • 9
  • 47
  • 74
2
votes
1 answer

While creating angular-element, multiple chunk files are generated. How to I merge all of them into one

I have created an angular element and bundled it using ngx-build-plus. After bundling, other than the main,vendor, polyfills etc, I have 100+ chunk files in my dist folder. How do I merge them all into one file. How do I use these files in another…
2
votes
1 answer

Angular web component (elements) input is undefined in ngOnInit

I am building a web component in Angular. My objective is to evaluate if the consumer of the web component provided a given input, in this case "accessToken". However the input is undefined in ngOnInit(), but prints in ngOnChanges() …
DauleDK
  • 3,313
  • 11
  • 55
  • 98
2
votes
3 answers

Angular elements with APP_INITIALIZER

I am trying to figure out how to load my config before the component gets created and APP_INITIALIZE is not working. The structure is AppModule------> HeroesModule(HeroesComponent) code: app.module.ts @NgModule({ declarations: [ …
2
votes
0 answers

Angular custom element, getting element not found error

I'm writing an angular custom element. Rather than explaining the whole thing I have uploaded the code to the following url https://github.com/arjunagl/angular-custom-elememtns However when I add the code to a standard html page like the…
tmp dev
  • 8,043
  • 16
  • 53
  • 108
2
votes
2 answers

Angular web components & routing

I am working with Angular Web Components like shown in example here. All web components are displayed fine in the parent app (e.g. http://localhost:8080/dashboard) but my current problem is that I have a button in my web component and I need go to…
beanic
  • 539
  • 6
  • 22
2
votes
0 answers

No Angular interpolation when ngZone is noop

I understand that if I set ngZone to 'noop' in the main.ts file, I'll have to manually detect changes in the component. How do I manually detect changes in this case? I want to update my formDataIncome value to change the data in a graph (which…
MacD
  • 566
  • 3
  • 9
  • 27
2
votes
1 answer

Angular Elements - ViewEncapsulation

I have made an Angular Elements web component. It works fine just apart from the styling. The only time the styling actually works is when using ViewEncapsulation.None. However, when doing this the styling is affected by the parent web page. Is…
Kasper Sommer
  • 409
  • 1
  • 6
  • 18
2
votes
0 answers

How to disable ajax patching by zonejs in webcomponents

we are using webcomponents in legacy project and we have an issue that zone.js patches all ajax calls which is quite bad since we don't do any ajax call by webcomponent since project limitations. I know that it's recommended to disable zone.js in…
VladosJS
  • 1,210
  • 8
  • 20
2
votes
0 answers

How to use AMP components in Angular Elements app

I'm trying to use set of amp components in angular app. Everything works with standard view encapsulation, but my application needs to be built as angular element with shadow dom view encapsulation, in which case amp components are not rendering. As…
lexigren
  • 530
  • 4
  • 16
2
votes
2 answers

Specifying different imports for Angular Module if it is exported as a custom element

I've got a module which I need to use in two places. One inside an Angular application and another as a custom element on its own for use in other places where we are dropping into legacy systems. The issue arises due to AngularElements requiring…
AndyD
  • 875
  • 7
  • 18