Nxt-widget-1 NPM

NxtWidget1

An example Web Component created from an Angular project. Importing this declares a new custom element <nxt-widget1>

<nxt-widget1 height="400" width="300" user-preferences='{"color": "#444", "background": "#F1F8FF"}'></nxt-widget1>

Parameters:

width - width of the widget, px.
height - height of the widget, px.

user-preferences - other options, is should be a valid json object

{
  color: string; // text color
  background: string; // widget background
}

Usage

Statically

<nxt-widget1 height="400" width="300" user-preferences='{"color": "#444", "background": "#F1F8FF"}'></nxt-widget1>

Dynamically

const widgetElement: HttpElement = document.createElement('nxt-widget1') as HttpElement;

widgetElement.width = this.widgetMetadata.width;
widgetElement.height = this.widgetMetadata.height;
widgetElement.userPreferences = this.widgetMetadata.userPreferences;

this.wrapperElement.appendChild(widgetElement);

Usage inside an Angular application

Resolve external dependencies

For this you'll need to plug-in an importmap with links to hosted dependency files.

As a separate project:
Plug in the external dependencies as a link to an importmap in the <head> of your root project's index.html (the example contains a local hosting case).
```
<script type="systemjs-importmap" src="http://localhost:5000/importmap.json"></script>
```
Run the Common Dependencies project. Change a link to the hosted importmap if necessary.

As a local importmap:

Add this tag to the <head> of your root project:

<script type="systemjs-importmap">
  {
    "imports": {
        "rxjs": "https://unpkg.com/@esm-bundle/rxjs/system/rxjs.min.js",
        "rxjs/operators": "https://unpkg.com/@esm-bundle/rxjs/system/rxjs-operators.min.js",
        "zone": "https://cdn.jsdelivr.net/npm/zone.js/dist/zone.min.js",
        "@angular/core": "https://cdn.jsdelivr.net/npm/@angular/core@8.2.14/bundles/core.umd.js",
        "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/common@8.2.14/bundles/common.umd.min.js",
        "@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/compiler@8.2.14/bundles/compiler.umd.js",
        "@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/forms@8.2.14/bundles/forms.umd.min.js",
        "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/platform-browser@8.2.14/bundles/platform-browser.umd.min.js",
        "@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@8.2.14/bundles/platform-browser-dynamic.umd.min.js",
        "@angular/animations": "https://cdn.jsdelivr.net/npm/@angular/animations@8.2.14/bundles/animations.umd.min.js",
        "@angular/router": "https://cdn.jsdelivr.net/npm/@angular/router@8.2.14/bundles/router.umd.min.js",
        "moment": "https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"
    }
  }
</script>

Add Web Components support to a hosting application

Set compiler options
Add the following option to the root tsconfig.json:
```
{
  compilerOptions: {
    "allowJs": true
  }
}
```
Enable custom elements
Add to src/app/app.module.ts:
```
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: []
```

Add polyfills for older browsers

Install webcomponents

npm install --save-dev @webcomponents/webcomponentsjs

In angular.json add this object to the assets array:

{
  "glob": "**/*.js",
  "input": "node_modules/@webcomponents/webcomponentsjs",
  "output": "webcomponents/"
}

Add to polyfils.ts

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import '@webcomponents/webcomponents-loader.js';

Install your component to the project

Install the widget from npm
```
npm i --save nxt-widget-1
```
Import widget inside app.module.ts
```
import 'nxt-widget-1';
```

Use it as usually.

@infinitebrahmanuniverse/nolb-nx @everything-registry/sub-chunk-2361 @zalastax/nolb-nx

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago