Angular custom Element Customized Web Component

Angular Custom Web Components:

First, create a component named Mycustom.

Introduction of App.module:

... import {customcomponent} from './mycustom.component '; @NgModule ({  declarations:[appcomponent, Customcomponent],  entrycomponents:[customcomponent]    .....}) Export Class appmodule{}

　　

Global registration:

App.component:

Import {Component,injector} from ' @angular/core '@angular/elements './mycustom.component '; Component ({}) Export class appcomponent{constructor (private injector:injector) {   const customelementref= createcustomelement (Createcustomelement,{injector});   Customelements.define (' my-test ', customelementref);}      }

Ok, this completes the ' my-test ' overall, and then it can be used as a Web component.

Go to our main HTML:

Index.html

Attention:
1. Put in front of the app-root, the effect is the same. There are no points in succession.
2. My-test's injection dependency, inherited from App.component. You can use it safely inside.
3. When you are a Web component, input cannot accept variables. Output does not take effect:
Ask:
Now that angular can register the global Web Component, can it be used in conjunction with react?
Of course, then the above:
Perfect operation.
　Angular component is registered as a Web Component technology. Let angular's agility soar instantly!   But is it necessary to use it in conjunction with react? 
Of course, it depends on your business requirements, such as your leader forcibly designated you to use react.
But when you face some complex components or page development, the relatively low efficiency of react, as well as large-scale repetitive computations, slow performance, can be very upsetting to you. At this point, perhaps you can consider using angular to quickly and easily provide a high-performance and stable component for your react project.
Add Ng6 once again lose weight, core library like jquery size, angular the future, a bright.
---
Before using the custom element:
To install the Webcomponents fill Library:
NPM install Webcomponents/webcomponentsjs--save;
Introduced in Polyfill.ts:
Import ' @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js '
Angular custom Element Customized Web Component