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

Turning the Stackblitz HelloComponent into a Web Component?

Trying to turn the HelloComponent that comes with the Stackblitz Angular default project into a Web Component that runs in the same project. https://stackblitz.com/edit/angular-custom-elements-hello?file=src%2Fapp%2Fapp.module.ts Within the…
Ole
  • 41,793
  • 59
  • 191
  • 359
1
vote
0 answers

Can't set the href on a element using any type of binding

I'm trying to dynamically add a style sheet to an Angular Element. I'm doing this by adding a to the template. This works fine if I do it through JavaScript. E.g. newLinkElement.setAttribute('href', '//mystyles.css') But if I try to do this with…
moefinley
  • 1,248
  • 1
  • 13
  • 26
1
vote
0 answers

angular elements, multiple components with shared angular/ivy

I am trying to add angular to an existing legacy app, changing page/components one by one. I am able to create custom elements using: createCustomElement as mentionned here: https://angular.io/guide/elements But I want to create multiple components…
user1928596
  • 1,503
  • 16
  • 21
1
vote
0 answers

How to secure Spring Cloud Gateway with Keycloak MultiTenancy?

I'm trying to secure my Spring Cloud Gateway using Keycloak with multi Tenancy. I started by following these…
1Z10
  • 2,801
  • 7
  • 33
  • 82
1
vote
1 answer

Angular 9 Elements: how to create a standalone WebComponent (with all the dependencies)?

I'm trying to design a new application based on Micro Frontends with Angular 9 and WebComponents. The main goal that I want to achieve with WebComponents is tha ability to have different teams working independently, deploying their updates whenever…
1Z10
  • 2,801
  • 7
  • 33
  • 82
1
vote
3 answers

How to give access to HTML element based on user name?

I have a button that I need to give permission to a specific user If he logs in into a website. I can do this with *ngIf on the HTML file but I would like to give the HTML element an id and then do the permission operation on the .ts file.
Saruman
  • 61
  • 1
  • 8
1
vote
3 answers

Angular Elements 8 does not work with EDGE/IE11 when using @Input()

I'm trying to create some custom elements with Angular Elements 8 and it works great when using simple objects as string/number on my @Input(). But when I wanted to start using arrays of objects IE EDGE/11 throws exceptions. Procedure Clone repo…
Anders
  • 878
  • 1
  • 9
  • 20
1
vote
0 answers

How to not bootstrap Angular web elements for lazy loading

I'm trying to build an angular application to build web elements using @angular/elements module. The root project will only be used for testing those components in a standard stand-alone app. I created a project called "elements" which only purpose…
1
vote
1 answer

Set up an Event Listener on an Exported Angular Elements Web Component

EDIT: This is a Web Component exported from Angular using Angular Elements and is not traditional Angular I am experimenting with Angular Elements and have created an NgFor component that loads the JSON file below. [ { "id":1, "name":…
Bwizard
  • 955
  • 2
  • 15
  • 36
1
vote
3 answers

NgFor in an Angular Elements Web Component Using a JSON file: How to get the values

EDIT: This is a Web component in a static HTML file, I'm only using Angular to compile it. I am experimenting with Angular Elements and have created a webcompoent that is a simple NgFor with an input from a JSON file.
Bwizard
  • 955
  • 2
  • 15
  • 36
1
vote
1 answer

cat command equivalent in windows for angular build process

So I am trying to create my first web component implementation using this article. However, I am finding it hard to execute one particular command(I am using windows) which is meant for linux: "package": "cat…
1
vote
1 answer

NPM run package gives error for Angular Element

I am creating an Angular Element 'ele-counter' in my application. I have tested the component separately it is working fine. It builds successfully. But when I am trying to run the package to create the 'ele-counter.js' file, it gives the following…
Techie
  • 73
  • 1
  • 9
1
vote
3 answers

Angular Element Component doesn't update when I add object from property

I have Angular Element Component (with Angular 8) which has 2 props. When I try to push something in the array the Shadow-Root doesn't re-render it(the counter yes instead). How I can force the rendering when i push an object in the component?…
Bonfry
  • 163
  • 2
  • 12
1
vote
1 answer

My angular 7 web component @Input doesn't work when I bind a false value

I have setup an application which exports web components from angular 7 using angular custom-elements package. Everything works fine. I am able to bind anything, arrays, objects, strings from javascript using the element instance: const table =…
Fran
  • 13
  • 4
1
vote
1 answer

How to add angular element selector inside the ngFor

I have 4 angular elements (Web Components) in my projects. I have added script tag for those web components in index.html and i want to display those elements dynamically in my angular application. i…