How to build webcomponentjs v0 polyfill and include in angular

1) git clone https://github.com/webcomponents/webcomponentsjs repository
2) check out v0 branch
3) install gulp globally

  1. npm install -g gulp

4) build webcomponentjs manually

  1.  npm install
  2.  gulp build

5) Find the generate js files in dist/ folder
6) Copy webcomponents.min.js to assets folder of angular project
7) import webcomponents.min.js to polyfill.ts

  1. import "./assets/webcomponents.min";

Create custom element in angular 6

1) Create Angular Project

ng new <project name> --prefix custom --style=scss --skip-tests

2) Use schematics to add angular element support

ng add @angular/elements

3) Use angular-cli to generate new component and specify encapsulation is ViewEncapsulation.Native
4) Assume the custom element uses Bootstrap 4 for styling. Then, import Bootstrap Sass in scss file of the component.

$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap/scss/bootstrap";

5) app.module.ts does not bootstrap AppComponent

  1. @NgModule({
  2.   declarations: [AppComponent],
  3.   imports: [
  4.     BrowserModule,
  5.     FormsModule,
  6.     HttpClientModule,
  7.     NgbModule.forRoot(),
  8.     TimeZoneModule
  9.   ],
  10.   providers: [],
  11.   bootstrap: []
  12. })
  13. export class AppModule {
  14.   constructor(private injector: Injector) {}
  15.  
  16.   ngDoBootstrap() {
  17.     const timeConverterElement = createCustomElement(InputTimeFormComponent, {
  18.       injector: this.injector
  19.     });
  20.     customElements.define("time-converter", timeConverterElement);
  21.   }
  22. }

6) Build a nodeJS script to concatenate runtime.js, polyfill.js, script.js, main.js into time-converter.js. The time-converter.js can be used in other JS Frameworks and static website.

  1.  
  2. const fs = require("fs-extra");
  3. const concat = require("concat");
  4. (async function build() {
  5.   const files = [
  6.     "./dist/ng-time-converter/runtime.js",
  7.     "./dist/ng-time-converter/polyfills.js",
  8.     "./dist/ng-time-converter/scripts.js",
  9.     "./dist/ng-time-converter/main.js"
  10.   ];
  11.   await fs.ensureDir("elements");
  12.   await fs.emptyDir("elements");
  13.   await concat(files, "elements/time-converter.js");
  14.   await fs.copyFile(
  15.     "./dist/ng-time-converter/styles.css",
  16.     "elements/styles.css"
  17.   );
  18.   await fs.copy("./dist/ng-time-converter/assets/", "elements/assets/");
  19.   await fs.copyFile("./src/demo.html", "elements/index.html");
  20.   await fs.copyFile("CNAME", "elements/CNAME");
  21. })();

Articles I want to read

Tensorflow

https://towardsdatascience.com/how-to-build-a-gesture-controlled-web-based-game-using-tensorflow-object-detection-api-587fb7e0f907

Ngrx

https://medium.com/@bo.vandersteene/advanced-pagination-with-ngrx-store-and-angular-5-f26ca4761cef
https://medium.com/@vlado.tesanovic/handling-keyboard-shortcuts-in-angular-with-redux-ngrx-c88907f17ca8

Angular
https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
https://medium.com/frontend-coach/self-or-optional-host-the-visual-guide-to-angular-di-decorators-73fbbb5c8658
https://medium.com/@davidibl/advanced-reusable-custom-angular-validator-9ca5febef583
https://malcoded.com/posts/web-assembly-angular?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

JS
https://blog.logrocket.com/using-trampolines-to-manage-large-recursive-loops-in-javascript-d8c9db095ae3

React Native
https://medium.freecodecamp.org/after-building-my-first-react-native-app-im-now-convinced-it-s-the-future-d3c5e74f8fa8

Angular Reactive Form Articles

Angular Reactive Form

Reactive Forms Form Array Dynamic Fields
https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

Angular Reactive Form
https://angular.io/guide/reactive-forms
Reactive Form (Stackblitz)

Angular 2 Reactive Form
https://toddmotto.com/angular-2-forms-reactive

REACTIVE FORMS IN ANGULAR
https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Reactive Form and Formarrayname
https://github.com/railsstudent/dnd

Build dynamic reactive form
https://juristr.com/blog/2017/10/demystify-dynamic-angular-forms/