nxt-widget-1

v1.0.0

Published

2 years ago

An example Web Component <nxt-widget1> created from an Angular project.

Downloads

0High
0Medium
0Low

antarus66

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/[email protected]/bundles/core.umd.js",
        "@angular/common": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/common.umd.min.js",
        "@angular/compiler": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/compiler.umd.js",
        "@angular/forms": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/forms.umd.min.js",
        "@angular/platform-browser": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/platform-browser.umd.min.js",
        "@angular/platform-browser-dynamic": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/platform-browser-dynamic.umd.min.js",
        "@angular/animations": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/animations.umd.min.js",
        "@angular/router": "https://cdn.jsdelivr.net/npm/@angular/[email protected]/bundles/router.umd.min.js",
        "moment": "https://cdn.jsdelivr.net/npm/[email protected]/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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme