Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does Angular2 use Web Components?

I've heard a lot of talk about the second coming of Angular and there seems to be a lot of fantastic things coming out of it but I know that Angular 1.0 does not have out of the box integration for Web Components.

I've read up some about Angular2 and that it no longer uses directives. So I was wondering if that means Angular2 is going to make use of Polymer/HTML Templates and other Web Components without any extra integration?

like image 297
Caden Albaugh Avatar asked Oct 24 '16 19:10

Caden Albaugh


People also ask

What are components angular2?

Essentially, a component class is a TypeScript class that includes properties and methods. Properties store data and methods include the logic for the component. Eventually, this class will be compiled into JavaScript.

What are Web components examples?

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. For example, we can create our new component called <my-web-component> , with its unique styling and functionality, and use it in any JavaScript framework or library .

Does react use Web Components?

As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.


1 Answers

update 2

That's now supported https://angular.io/guide/elements

update

There is an ongoing effort (currently only experimental) to change that - Angular elements https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/

original

Web components can be used in Angular2 applications, but Angular2 components can't be consumed as web components.

AFAIK there are no short-term plans to make Angular2 components actual web components. This was a goal at the beginning but turned out to be too complicated.

With the per component setting ViewEncapsulation.Native, shadow DOM is used, but that doesn't work too well in Angular2 because the browsers lack features to style the shadow DOM. Polymer uses emulated CSS variables and mixins but Angular2 doesn't yet provide anything like that.

Currently the default setting is ViewEncapsulation.Emulated where some style scoping is emulated.

like image 98
Günter Zöchbauer Avatar answered Oct 18 '22 04:10

Günter Zöchbauer