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

Rendering the contents of a slot into multiple places inside of a webcomponent

The Problem I am using Angular and its Angular Elements to generate Webcomponents. I want clients to be able to pass these webcomponents icons into slots, so that the client can determine what the icons that get used look like. However, that means…
0
votes
0 answers

Angular Elements - Query Params always empty

We are creating an angular elements to be embedded in an other web site. The angular-elements need to read the queryParams to get specific details and need to react when the queryParams change. So with an Angular App its fairly easy! The code below…
Vince
  • 1,279
  • 2
  • 20
  • 40
0
votes
1 answer

Error: Property '"url"' is incompatible with index signature. Type '{ alias: "axLazyElement"; required: false; }' is not assignable to type 'string'

Facing this error while using @angular-extensions/elements for lazy loading of angular element I tried using in the component like below: Hello I followed all the…
Dhruvi
  • 11
  • 3
0
votes
1 answer

Passing object variable as @input to an angular custom element and bind a method for the @output event while adding the web element to summernote

I have been using ngx-summernote as my rich text editor. Now, for my project purpose, i will need to insert out custom angular component dynamically to the rich text editor. After analysis, i found that the rich text editor supports dynamic html…
0
votes
0 answers

The second angular custom element is not displayed

I have two custom elements where I'm calling main.js. I try to display both within another app using @angular-extensions/elements or just adding script to index.html. When I call the two custom elements I it just shows the first one on the screen,…
0
votes
0 answers

Angular Elements web component with ShadowDom viewEncapsulation Adds redundant inline styles to host index.html

I have an angular elements application that contains a single component, app.component.ts and uses an external .scss for its styling I have set the viewEncapsulation of the app.component as follows: @Component({ selector: 'app-form', …
js-newb
  • 421
  • 6
  • 16
0
votes
0 answers

Preventing host page styling leaking into Angular Elements web component

Briefly: I created an Angular Elements web component in Angular 15 I have ViewEncapsulation.Emulated set for the component (for some reason, ViewEncapsulation.ShadowDom doesn't work - it breaks some of the contained third party controls) CSS for…
Ivan Pelly
  • 147
  • 2
  • 12
0
votes
0 answers

How to access bearer token client-side from Angular Elements component hosted within ASP.Net

I have an asp.net website which requires a login. Subsequent to successfully logging in, I can see that API calls have an Authorization request header with a bearer token. I have an Angular Elements web component on a particular page, and I need it…
Ivan Pelly
  • 147
  • 2
  • 12
0
votes
1 answer

keycloak-angular with AngularElements and Standalone Component (no Authorization Header added to requests)

I have an angular app (and a nestjs backend) and I try to handle user login with the help of keycloak. As the buzzword rich question title states I have kind of a "weird" architecture. I want to create a custom element with the help of angular…
0
votes
0 answers

How to authenticate external web components with API calls

I've been tasked with creating a suite of web components to share with customers to consume into their websites. I've come across the idea of Angular Elements, and this looks interesting, but I'm not sure if this is the best solution for our needs,…
GeoffP
  • 1
0
votes
1 answer

Angular Element - Custom web component - bundle

I have developed a custom web component that I am using in a Chrome Extension (Content). This Angular web component worked fine in Angular 12. I bundled all the scripts and loaded them in various web pages without issues. So I got this bright idea…
Tom Lee
  • 11
  • 1
  • 3
0
votes
0 answers

Angular 12 web component incorrectly appending dropdowns

I want to create a web element with angular, it includes inside some components, such as primeng split-button, and its going to be used with Vanilla JS. Split-button has a property "appendTo", which takes target element to attach the overlay, valid…
0
votes
0 answers

Multiple custom Angular elements zone issue from host application

I am using two angular elements in two different tabs in angular host application and both of them uses firebase, In host application I face an issue about rendering in DOM, which is after retrieving data from first one it is rendered in UI with no…
0
votes
0 answers

angular web component all states are clear when using *ngIf is false

How to save all states of angular web component if it is false using ngIf? In angular component, the type is bound to use the form input. import { Component, Input, OnInit, Output, EventEmitter, ViewChild, TemplateRef } from…
haya
  • 5
  • 2
0
votes
0 answers

How to stop host CSS bleeding into web component with angular elements

Currently I am working on a specialized web component built with angular elements, where I have some dependencies to prime ng and primeflex library, due to this I cannot enable ViewEncapsulation.ShadowDom, because prime ng has any issues with it.…
Zsolt Balint
  • 767
  • 1
  • 6