open-index/open-npm huggingface dataset:
npm package: @gmsca/ng2element
Description: A convert tool by schematics
Author: ANAN.SUN
Latest version: 0.1.4

# Convert Ng App to Ng element

> Working with Angular 8 and later.

## Try it

### Install it from npmjs

- go to your exist angular project folder
- run `ng add @gmsca/ng2element`
- run `npm run build:ngelement`
- then, you will get a `<projectname>-element.js` file in `root/elements/`
- Use webserver to load `elements` folder.
  - I use `live-server` to open it in vscode.
- Open live server: http://localhost:5500
- it should work that is web component by angular element.

## Reference

- [Angular Elements Quick Start Guide by Jeff Delaney](https://angularfirebase.com/lessons/angular-elements-quick-start-guide/)
- [Schematics Utilities by Nitay Neeman](https://github.com/nitayneeman/schematics-utilities)
npm package: @gmsca/ngdivolte
Description: A blank schematics
Author: ANAN & AVNEET
Latest version: 0.0.4

# Add Divolte to your project

1. setup environment to angular 8 project.
   ```bash
   ng add @gmsca/ngdivolte
   ```
   all divolta related source code will be added.
2. modify the `divolte.js` position in `environment.ts` file.
   ```ts
   export const environment = {
     divolteUrl: '<your divolte.js location>/divolte.js',
     ...
   };
   ```
3. Try it

   - find a html file for testing, like `app.component.html`. create a button element with `appInputTracker` directive.

     ```html
     <button appInputTracker>any button</button>
     ```

   - also, add a `eventName`
     ```html
     <button appInputTracker eventName="next">any button</button>
     ```

4. if the divolte backend is running, **click** the button, then receive a json data.
npm package: @gmsca/setupbootstrap
Description: setup Bootstrap latest version to Angular project
Author: ANAN.SUN
Latest version: 0.0.5

## Try it

This tool is convenient to optimize css, and can be easily integrated with angular material.

### Install it from npmjs

- go to your exist angular project folder
- run `ng add @gmsca/setupbootstrap`
- run `npm run setup:bootstrap`
- then you can add custom scss definition to \_customVariables.scss.
npm package: @gmsca/setupmaterial
Description: Setup fontawesome and angular material to angular project
Author: ANAN.SUN
Latest version: 0.0.3

## Try it

This tool is convenient to setup fontawesome and angular material in Angular project.

### Install it from npmjs

- go to your exist angular project folder
- run `ng add @gmsca/setupmaterial`
- run `npm run setup:material`
- now, @fontawesome-angular, @angular/material, Custom theme (modify \_theming.scss) is in the project.