# ngx-micro-product

> a simple micro front end to be shared on other platforms

Latest version **1.0.19** (published 2019-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-micro-product
pnpm add ngx-micro-product
yarn add ngx-micro-product
bun add ngx-micro-product
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.19 |
| Published | 2019-06-06 |
| First published | 2019-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 20 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jeffrey Alca |
| Maintainers | jeffreyalca |
| Keywords | micro-product |

## Links

- npm: https://www.npmjs.com/package/ngx-micro-product
- Repository: https://github.com/EssilorUSA/prototype-ng7-web-component
- Issues: https://github.com/EssilorUSA/prototype-ng7-web-component/issues
- npm.io page: https://npm.io/package/ngx-micro-product

## Dependencies (20)

- [rxjs](https://npm.io/package/rxjs.md) ~6.3.3
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^7.3.7
- [@angular/core](https://npm.io/package/@angular/core.md) ~7.2.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~7.2.0
- [@angular/common](https://npm.io/package/@angular/common.md) ~7.2.0
- [@angular/router](https://npm.io/package/@angular/router.md) ~7.2.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~7.2.0
- [@angular/elements](https://npm.io/package/@angular/elements.md) ^7.2.15
- [@angular/material](https://npm.io/package/@angular/material.md) ^7.3.7
- [@essilor-usa/core](https://npm.io/package/@essilor-usa/core.md) ^3.0.1
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^7.2.13
- [@angular/flex-layout](https://npm.io/package/@angular/flex-layout.md) ^7.0.0-beta.22
- [@swimlane/ngx-datatable](https://npm.io/package/@swimlane/ngx-datatable.md) ^14.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~7.2.0
- [document-register-element](https://npm.io/package/document-register-element.md) ^1.7.2
- [@webcomponents/custom-elements](https://npm.io/package/@webcomponents/custom-elements.md) ^1.2.4
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~7.2.0

## Recent versions

- 1.0.19 (latest) — 2019-06-06
- 1.0.18 — 2019-05-31
- 1.0.17 — 2019-05-30
- 1.0.16 — 2019-05-28
- 1.0.15 — 2019-05-27
- 1.0.14 — 2019-05-27
- 1.0.13 — 2019-05-27
- 1.0.12 — 2019-05-27
- 1.0.11 — 2019-05-27
- 1.0.10 — 2019-05-24
- 1.0.9 — 2019-05-24
- 1.0.8 — 2019-05-20
- 1.0.7 — 2019-05-17
- 1.0.6 — 2019-05-17
- 1.0.5 — 2019-05-17
- … 5 more at https://npm.io/package/ngx-micro-product/versions

## README

# MicroProduct

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `npm run build:micro-product` to build the project. The build artifacts will be stored in the `dist/` directory.

## Importing on other projects

To import in angular, install the latest version through npm. Execute `npm i ngx-micro-product@latest`.

### Plain html

Add this code to your html:

```html
<script src="./node_modules/ngx-micro-product/dist/micro-product/main.js"></script>
```

### Angular/VueJS/ReactJS

Add this import statement above the component.ts you want it to appear.

```typescript
import ...
import 'prototype-vue-web-component';
``` 

## Usage

To add the products list place this code on your html.

```html
<micro-products data=""></micro-products>
```

The data must contain a string json. The format of the data should follow this pattern:

```typescript
{
  id: 1,
  name: "Essilor SFV",
  category: "Lens Design"
}
```

### Adding events

#### Plain html
To add an event to trigger the edit button add this code on your html:

```html
<script>
  const microProduct = document.querySelector('micro-product');
  microProduct.addEventListener('tableClicked', ($event) => {
    alert(JSON.stringify($event.detail));
  });
</script>
```

#### Angular

Change the signature of the tag into this:

```html
<micro-products [data]="stringArrayProducts()" (tableClicked)="yourCustomEvent($event)"></micro-products>
```

#### VueJS

Change the signature of the tag into this:

```html
<micro-product-form v-on:formSubmitted="addProduct($event)"></micro-product-form>
```


Add `<micro-product-form></micro-product-form>` for the product form.

```
<script>
  const microProductForm = document.querySelector('micro-product-form');
  microProductForm.addEventListener('formSubmitted', ($event) => {
    alert(JSON.stringify($event.detail));
  });
</script>
```

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

---
_Source: https://npm.io/package/ngx-micro-product · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._