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
1
vote
1 answer

load remote url in angular route loadchildren

I am trying to load a lazy-loaded application from a server localhost://4600 inside a client application localhost://3000 as an angular-element using ngx-build-plus, but when I load the angular element it fetches chunks using the client…
Bennet Sam
  • 116
  • 1
  • 1
  • 5
1
vote
0 answers

Angular Elements: Custom element properties are undefined in OnInit function

We are using Angular Elements to create custom elements (web components) out of our component library. However, it seems after doing this the Angular lifecycle hooks do not execute in the same order as they normally do. For example, ngOnChanges…
B Snow
  • 393
  • 3
  • 14
1
vote
0 answers

Angular strips web components from rendered components?

According to this tutorial we need to set the tsconfig.json compiler option allowJs to true and include CUSTOM_ELEMENTS_SCHEMA and I've done these two things as shown in this Stackblitz: https://stackblitz.com/edit/angular-web-component-stripping I…
Ole
  • 41,793
  • 59
  • 191
  • 359
1
vote
2 answers

How do you run/debug/serve an Angular Element before a production build?

I'm am using the latest version of Angular (11) to try and create an Angular Element that I will package up and use in a static webpage outside of an Angular app. However, while I'm developing the component, I would like to be able to use ng serve…
Andrew
  • 893
  • 12
  • 28
1
vote
4 answers

Angular Elements - cannot pass variable to @Input property of my Elements Tag

I need some assistance here, I am unable to pass a variable to the @Input variable of my Elements tag. If I hard code a caller-id = "123456" inside the tag it works with no issues; however if I try and pass the caller id from the Angular component…
Rob DePietro
  • 284
  • 2
  • 8
  • 23
1
vote
0 answers

How to pass variable between microfront end and parent container?

I am trying to create an angular element microfrontend. This MF would be used in .net MVC apps. The MF would be converted as a javascript file CDN to be consumed into parent app. My question is how should I pass variable from .net MVC app to my…
Rachana
  • 11
  • 1
1
vote
0 answers

Dynamically loading modules or components in Angular

So what I'm trying to accomplish is to load modules or components that are not known at compile time. We (my team and I) have built an application and now we want to make the application extensible for other teams. We want to enable the teams to…
YentheO
  • 307
  • 4
  • 13
1
vote
0 answers

Angular Element not rendering material css and some properties don't work as expected

I have created an Angular element using Angular Material "MatSlider", when used as a component it works fine and renders all the css and input the properties works as expected, but once it is packaged and rendered as a web component in a separate…
Karthik Ganesan
  • 4,142
  • 2
  • 26
  • 42
1
vote
0 answers

Multiple linked angular components to Angular Elements

I have around 15 angular components in angular library. Unfortunately I am unable to use that library in non angular application. So I decided to create web components of this library. Is this possible. If yes, how to handle 15components interms of…
Devu Rakesh
  • 11
  • 1
  • 3
1
vote
1 answer

How can I do a default export for a custom element created with angular

I'm very new to custom elements. I need to create a custom element to integrate into another app at our company. The problem is my custom element should be a default export I think. I need to make my custom element created by angular somehow…
gyozo kudor
  • 6,284
  • 10
  • 53
  • 80
1
vote
2 answers

Sharing libraries among angular micro app elements

I have an micro app element and a shell app which works fine normally. However, I'm trying to build the micro app without the common libraries and refer to them from the global scope. I followed the following tutorial Building angular elements with…
vish78
  • 13
  • 5
1
vote
1 answer

Angular(9.1.1) element is giving error after embedding this element to another angular9.1.1 project

I have two angular 9.1.1 project. The first one is to create an angular element and the other one is to use that element. Node: v12.16.2 NPM: 6.14.4 package.json { "name": "angular-element", "version": "0.0.0", "scripts": { "ng": "ng", …
Himanshu Tamrakar
  • 57
  • 8
1
vote
2 answers

Use CSS selectors like :first-child inside shadow dom

Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom? The example is like this CustomElement.html
Kavinda Jayakody
  • 705
  • 1
  • 13
  • 25
1
vote
3 answers

Styling default slot in webcomponents

In webcomponents, we have two type of slots (named slots and default slots). We can easily style named slots by using syntax slot[name]::slotted(*). But is there any way that we can style default slots because they don't have any name…
Kavinda Jayakody
  • 705
  • 1
  • 13
  • 25
1
vote
1 answer

Polyfill Support for Angular 9 Custom Elements?

What does Angular recommend for Polyfilling support for custom elements built with Angular? This demo works with only this polyfill added to polyfills.ts: import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js' This article says we…
Ole
  • 41,793
  • 59
  • 191
  • 359
1 2 3
…
20 21