Stack Overflow
Stack Overflow

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
5
votes
0 answers

Angular Element - Set the Shadow DOM to closed

When create an Angular Element with the default settings the Shadow Root is open. Does anyone know if it is possible to create and Angular Element with a closed Shadow Root?
moefinley
  • 1,248
  • 1
  • 13
  • 26
5
votes
0 answers

Micro Front End Routing : Angular Router in Web Component/angular element

I am creating an UI application using micro front end architecture. I have three application : 1. micro-app-a (written in angular) 2. micro-app-b (written in angular) 3. shell application (written in angular) My micro-app-a has its own angular…
Atul
  • 521
  • 1
  • 7
  • 20
5
votes
2 answers

Why angular elements are swallowing error?

I have the simplest possible angular element within an angular project. I throw error in component belonging to angular element as follows: dashboard-tile.component.ts user as in…
dasfdsa
  • 7,102
  • 8
  • 51
  • 93
5
votes
2 answers

Problem with Angular Element support in chrome and IE11 simultaneously

I have been playing around with Angular Elements and trying to achieve the best browser compatibility possible. However I seem to have hit a dead end, since when I add an IE polyfill for Shadow DOM, it breaks the Element in chrome. Initially I had…
Jonas Mohr Pedersen
  • 427
  • 7
  • 19
5
votes
1 answer

Unregister custom element

Is it possible to unregister a custom element that has been created by createCustomElement? We use Web Components to wrap out vertical features, all 'parts' of the feature are downloaded before the Web Component is added to the DOM. What we would…
Steoates
  • 3,058
  • 5
  • 27
  • 43
5
votes
0 answers

Angular Elements @Input() binding in parent component

i'm stuck for hours with a problem i can't solve. I've created a component and bundled it as a js file. I want to load this js file to another project. So far everything works great. But i created a Component with an @Input() decorator. Now when i…
Tomislav Erić
  • 215
  • 1
  • 8
5
votes
3 answers

How to embed an angular element inside an angular application?

I have an angular element, goes with custom tagname - fancy-button. How can I embed fancy-button in a angular application? I have tried the following ways, but none of them worked - Imported angular-element script in…
Moazzam Khan
  • 3,130
  • 2
  • 20
  • 35
4
votes
0 answers

Angular ng-if directive breaks web component exported with Angular elements

I would desperately ask for help to check if this is an Angular issue, an Angular element issue or a issue that I caused. Intro In our client project we're exporting components as web components with the help of Angular elements. With a certain use…
Andreas E
  • 41
  • 1
4
votes
2 answers

How to encapsulate Angular app's global CSS within exported web component?

Goal I have an Angular 11 site with a large form component using Angular Material -- let's call it myExportableComponent. I want to use myExportableComponent in my site like normal, but also export it as a generic web component (a.k.a. "custom…
Roobot
  • 860
  • 1
  • 10
  • 20
4
votes
1 answer

Place CdkOverlay inside angular/elements webcomponent

I have a more complex Angular-application that i want to deploy as a angular/elements webcomponent. The app makes use of mat-dialog and the webcomponent will also not take 100% of the browser windows size. My problem is that the cdk-overlay for the…
Raumfisch
  • 51
  • 1
  • 5
4
votes
1 answer

Call Angular web component method (CustomElement)

I have these two examples: Example 1: @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { options:any = {isOpen: false }; logOptions() { console.log(this.options); } } Example…
ferhado
  • 2,363
  • 2
  • 12
  • 35
4
votes
0 answers

Angular Elements Polyfills to use in IE11 and Edge problems

Following on from my last post here, where I have an Angular elements project, which I can get working in Chrome if compile with TS target of es2015, I have now gone back to compile with es5 (in preparation to try and get working in Edge and…
peterc
  • 6,921
  • 9
  • 65
  • 131
4
votes
2 answers

Angular Elements EventEmmitter : $event not showing emitted value

I am stuck while working with Custom Angular Elements, Whenever i emit a value i.e true or false, it works fine while using element in same angular project, whenever i use the element in other project by creating its bundled JS file. It shows the…
Abdul Basit
  • 1,352
  • 1
  • 10
  • 18
4
votes
0 answers

How to extend HTMLButtonElement using @angular/elements

Trying to compile a component using @angular/elements. Seems NgElement always extends HTMLElement. But I would like to extend HTMLButtonElement instead. Been looking at the createCustomElement's strategyFactory option, but cannot see where I can…
Martin Svarrer Christensen
  • 56
  • 2
4
votes
3 answers

Using multiple angular elements as web components within an angular project

Given three @angular projects all using v6.1.9: host, alpha, and beta alpha and beta create and define a web component each using @angular/elements as such: constructor(private injector: Injector) {} ngDoBootstrap() { const config:…
Collin Stevens
  • 737
  • 9
  • 19
1 2
3
…
20 21