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

Multiple copies of same Angular custom element on same page

I am writing a simple custom element in Angular 13, with the usual wrapping inside another application that uses createCustomElement and then customElements.define to register it into the browser and creating a single JS bundle. All is fine until I…
0
votes
1 answer

Multiple instances of same angular elements component

This is my code: In a .cshtml file: In the component.ts file: @Component({ selector: 'my-widget', templateUrl: './my-widget.component.html', styleUrls:…
petko_stankoski
  • 10,459
  • 41
  • 127
  • 231
0
votes
0 answers

Can I create complex Web Components with Angular Elements

I have an old application wrote in jquery. There is need new functionality (I want write it in Angular technology), which can be a bit complicated and consist of many components. I wonder if I can use Web Components with Angular Elements. Can it be…
user2123523
  • 173
  • 1
  • 1
  • 12
0
votes
0 answers

Child component events call the wrong parent

I have 2 instances of the same angular element in the same page: And in the component my-widget I have another…
petko_stankoski
  • 10,459
  • 41
  • 127
  • 231
0
votes
0 answers

I am having trouble including an angular web component into an existing angular application

I am trying to include an angular web component inside of an angular application. But I am getting this error. SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.o…
Beatbox
  • 77
  • 1
  • 4
0
votes
0 answers

Angular Elements (custom element) is not visible in the DOM

I have created a sample application to try and show a simple web component in Angular using Angular Elements. I am not facing any error in the console but my custom element is not visible in the browser DOM either. I am running Angular version…
Harsh Saudagar
  • 458
  • 1
  • 5
  • 14
0
votes
2 answers

Angular Elements - Is it Possible to Data Bind Inputs?

I've searched everywhere on the internet and I cannot figure out the answer. I was wondering if it was possible to data bind an Angular Element's input AFTER its been turned into a script and brought into plain HTML/JavaScript files. I've tested…
Koreanwest
  • 49
  • 4
0
votes
0 answers

Error RangeError: Maximum call stack size exceeded using webComponent with Angular 11

I have created a webComponent using Angular elements, it is a component that has a material-stepper, the first step is to select a point on a map and the second to fill in the form (it has no navigation). This is part of the configuration of the…
juanjinario
  • 596
  • 1
  • 9
  • 24
0
votes
1 answer

Custom elements are not loading in anpother angular app

I have created simple custom elements in angular in one project and created bundle using npx-build-plus and generated files as shown in the picture below, out of these files i took out main.js file. I created another angular cli project and…
Roster
  • 1,764
  • 6
  • 17
  • 36
0
votes
2 answers

Angular Ivy Prod - Webcomponent not loading

We have build a product based on a webcomponent. This webcomponent is created as an Angular Element based on Angular 10. This webcomponent is loaded in the header of the webpage as a script, this because it was requested to load this on every client…
Marco Fedele
  • 2,090
  • 2
  • 25
  • 45
0
votes
1 answer

Generate appropriate Angular Element dynamically without bloating the build size?

Summary: When createCustomElement() is called multiple times inside a switch case, all of the components will be included in the build, instead of just the one that will actually be used. This increases the build size with duplicate code. Details I…
Roobot
  • 860
  • 1
  • 10
  • 20
0
votes
0 answers

Component inside ng-content not load with custom Element Angular

I'm having a little problem with Angular Elements, here an exemple : I have custom element with this selector "custom" and this template : I have a component (not custom) with this selector "component" and this template…
0
votes
0 answers

Dynamically Update Web Component Script Tag

I'm currently using Angular elements to generate web components for a project and I'm having issues figuring out a way to dynamically change the script version value in a way to still work with the web component. I'm somewhat new to web components…
cempro
  • 49
  • 1
  • 7
0
votes
1 answer

Is it possible to add a custom angular element to a component html other than index.html

Angular version used: v11 I am trying to integrate an application with lazy loaded modules as angular elements using ngx-build-plus into another application. I am having some difficulty adding the element to a component in the main application. When…
0
votes
1 answer

ERROR in The target entry-point "@angular/elements" has missing dependencies:

I have seen almost all the similar posts, but I am unable to resolve it using those steps. I have been trying to create a web component using Angular 9. Angular version and details are : AV:webcomponents apoorvachikara$ ng version _ …
Apoorva Chikara
  • 8,277
  • 3
  • 20
  • 35