Ngx-micro-product NPM

MicroProduct

This project was generated with 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

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:

<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.

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

Usage

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

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

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

{
  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:

<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:

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

VueJS

Change the signature of the tag into this:

<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>