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

Angular Elements: contact all files into one bundle and contact their source maps

i'm trying to use Angular Elements for creating reusable component which will be used old legacy project( which is java project without any front end libraries ) and i need to have one bundle for it instead of including separately scripts for…
VladosJS
  • 1,210
  • 8
  • 20
3
votes
3 answers

Angular Elements - External library's CSS

I was hoping to use Angular Elements with an external library (Kendo UI). I managed to create a component and add it to my app. The problem is that Kendo's CSS messed up with all my app styling. Any idea on how could I encapsulate the CSS to only…
HobojoeBr
  • 599
  • 9
  • 23
3
votes
3 answers

Angular 6 variable not resolved in Google Chrome (web component)

Using Angular 6 I created a web component that is integrated from another application. Everything works on all browsers when running without an integration. When the web component is integrated in an other application it works on IE, Safari, FF but…
nimrod
  • 5,595
  • 29
  • 85
  • 149
3
votes
1 answer

Angular Elements / router outlet

Can an Angular Element use the router outlet? And, if so, will that router outlet interfere with (interact with) the parent router outlet?
RichardZ
  • 345
  • 2
  • 6
  • 18
3
votes
0 answers

Reuse Angular within @angular/elements component bundle with webpack

We have built a dashboard using Angular 6.0.3, this is built using the Angular CLI. We are experimenting using @angular/elements to create stand alone web-components that can also be reused as widgets. These web-components are being loaded into the…
Steoates
  • 3,058
  • 5
  • 27
  • 43
3
votes
1 answer

@angular/elements how can I update my custom element at the end of a rest call?

So I have this easy component: import { Component, ViewEncapsulation, OnInit, } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'custom-element', …
2
votes
1 answer

How to pass Angular directive by reference?

In an existing component template I have this (simplified) element: This is picked up (I don't know the correct term) by this property so we can subscribe to it's click event and call a function when the input…
Matt W
  • 11,753
  • 25
  • 118
  • 215
2
votes
1 answer

Get Element Reference of a DOM Element created dynamically from a library

I want to add a class to a DOM Element by taking it's reference. But the element is created by a library and I cannot access it directly, means I can't use ViewChild or HostBinding on that DOM Element. I can access it directly using…
Shantanu
  • 31
  • 4
2
votes
0 answers

DeployURL is deprecated, is there a planned alternative aside from baseHref?

The plan to eliminate the deployUrl option makes sense to me when thinking of a regular application, as the baseHref doesn't alter code. But before it gets removed, I wanted to get clarification of an alternative when there's no index.html file to…
2
votes
0 answers

Angular elements | Create separated build for each component

I have a regular Angular project and I want to convert it in an Angular elements project. My main goal is to have separated build files for each component/element. login/main.js header/main.js footer/main.js .... At this moment and following the…
2
votes
0 answers

How can I use material dialog as web-component to use it in the angular app

I am trying to make a material dialog as a web-components using angular elements. Opening a dialog in angular material needs to know the name of the dialog component DialogComponent. For eg. openDialog(): void { const dialogRef =…
surazzarus
  • 772
  • 5
  • 17
  • 32
2
votes
0 answers

Angular Element - "failed to resolve only because it was resolved as fully specified"

I have an angular element (within an nx workspace). when i use it in another angular project I get TypeScript dependency errors. It seems my elements cannot inherit any dependancies (or use peerDependancies) from its' host node_modules because of…
Omar
  • 2,726
  • 2
  • 32
  • 65
2
votes
1 answer

Publish Angular Elments web component as npm package

Is there a way to publish an angular app (which is wrapped as a web component using Angular Elements) as an npm package? I'm looking to import the web component in another app through npm as opposed to copying script files and including them in the…
afriedman111
  • 1,925
  • 4
  • 25
  • 42
2
votes
1 answer

Angular Elements - multiple instances share the same service by default

I've created my own webcomponent based on angular elements. I made everything according to manual. The sample code is: const el = createCustomElement(AppComponent, { injector: this.injector }); customElements.define('my-widget', el); I have…
2
votes
1 answer

Angular Web-Component created with Angular Elements overrides app-root of the Angular Shell Project

I am currently trying out Angular Elements for creating web components. I have created a web component that works in an html page: Test