angular-elements

问题 I started lately to play a little bit with angular elements that was released in angular V6, I opened a small sandbox project for that purpose. https://github.com/Slash7GNR/ndv-angular-elements Now I've tried to add a more complicated input to my web component - I've tried to add an array input as follows: in app.component.ts I've added: @Input() welcomeMessages: string[]; and in the template I've added: <div *ngFor="let message of welcomeMessages; let index = index"> {{index}} - {{message}}

问题 I've created and exported one Angular Element (web component in Angular) as a single script tag (user-poll.js). To use this Angular Element I just need to specify below two lines in the host site: <user-poll></user-poll> <script src="path/to/user-poll.js"></script> Working JSBin Example I've following requirements: Load multiple Angular Elements on the external site. Load all Angular Elements dynamically I've following issues: Loading multiple components on a site gives Angular conflicts, as

问题 I have several separated web components, made with angular elements, that I import in a main one, which has a router and is the base application. Routes are pretty simple: import { Component } from '@angular/core'; import { Router } from "@angular/router"; @Component({ selector: 'example', template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>', styles: [] }) export class ExampleComponent { public toPass: string = "Hello World!"; constructor(private

问题 I'm using AngularElements with native encapsulation so bs4 components can be used in bs3 project. Example: @Component({ selector: 'app-my-button', templateUrl: './my-button.component.html', encapsulation: ViewEncapsulation.Native, styles: ['@import "~bootstrap/scss/bootstrap.scss";'] }) export class MyButtonComponent {} The question is how to change encapsulation of 3rd party component so that global css doesn't affect it? Given NgbModalWindow component. How to change its encapsulation to

问题 I am working on a recursive query builder form, which is something similar to this, in angular 7, with reactive form . Means, the user can keep adding a parallel rule by clicking on Add rule and can add a group by clicking on Add group . I have created two components, QueryDesignerComponent and QueryComponent . QueryDesignerComponent holds the outer container, with AND and OR condition and QueryComponent holds the row input, that's LHS , operator and RHS . When user clicks Add rule I am

问题 I have been trying all day to get an Angular elements component working, as I was considering using them in an upcoming project. I have followed a number of tutorials (all very similar), and just cannot get them working. One of the tutorials is this one. I have the following package.json for the Elements project { "name": "angular-webcomponents-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e",

问题 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 really like is to completely destroy the component when the feature is no longer active but there it looks like there is no API available. Has anyone had any luck with this? 回答1: At the Angular level, there doesn't seem to be any "destroy" or "remove

问题 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 apply to the component and not "leak" to the rest of the parent app? Thanks UPDATE See the following stackblitz for the code: https://stackblitz.com/edit/angular-kpmnjg If I build the code I get 4 .js files and styles.css file (containing Kendo UI's

问题 I click the sort button, get all prices, and I need to ensure that elements were sorted correctly by prices. So I need to get price value="377", price value="1288", price value="1688" etc. but I can't get the right elements. <div class="ssl-price-box"> <price value="377" units="/yr" class="lg-price ng-isolate-scope"> <span class="price"> <span class="currency-icon">$</span> <span class="integer ng-binding">3.</span> <span class="cent ng-binding">77</span> <span class="units">/yr</span> </span

问题 I am creating an angular element which is supposed to be embedded on multiple external sites. The embedding process will ofc just be a reference to the compiled script and a DOM element representing the element: <html> <head> <script src="element.js"></script> </head> <body> <element></element> </body> </html> But the problem is that the element makes use of a few assets in .png, .svg, .gif and .jpg format. And of course the compiled element used on a different site, cannot reference those