# wm-components-project

> WM Component Project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5. to standarize angular material based components that will be use in different WM Discovery projects.

Latest version **0.0.1** (published 2024-03-13) · 0 weekly downloads

## Install

```sh
npm install wm-components-project
pnpm add wm-components-project
yarn add wm-components-project
bun add wm-components-project
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2024-03-13 |
| First published | 2024-03-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 706.4 KB |
| Known vulnerabilities | 0 (+20 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | ffigueroa2401 |

## Links

- npm: https://www.npmjs.com/package/wm-components-project
- npm.io page: https://npm.io/package/wm-components-project

## Dependencies (15)

- [rxjs](https://npm.io/package/rxjs.md) ~7.5.0
- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [zone.js](https://npm.io/package/zone.js.md) ~0.11.4
- [ngx-mask](https://npm.io/package/ngx-mask.md) ^13.2.1
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ~12.2.13
- [@angular/core](https://npm.io/package/@angular/core.md) ~13.2.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~13.2.0
- [@angular/common](https://npm.io/package/@angular/common.md) ~13.2.0
- [@angular/router](https://npm.io/package/@angular/router.md) ~13.2.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~13.2.0
- [@angular/material](https://npm.io/package/@angular/material.md) ~12.2.13
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~13.2.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~13.2.0
- [@ffigueroa2401/components-lib](https://npm.io/package/@ffigueroa2401/components-lib.md) ^0.0.21
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~13.2.0

## Recent versions

- 0.0.1 (latest) — 2024-03-13

## README

# Wm Components Project

## Introduction

WM Component Project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5. to standarize angular material based components that will be use in different WM Discovery projects.

## Getting Started

1. Installation process running `npm install`.

## Build

First run `ng build library-name` to build the components library for production.

Run `ng build` on the root folder "WM-COMPONENTS-PROJECT/" to build the project. The build artifacts will be stored in the `dist/` directory.

## Running

Run the project executing the necessary command in terminal:

- Development mode: `ng serve -o`
- Prod mode: `npm run prod`

## Development server

When `ng serve` is running. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Developer Instructions

To generate a new component inside the "components-lib" library:

- Execute in terminal `ng generate component new-component-name --project components-lib`
- Go to "projects/components-lib/src/lib" folder and export your new component inside "components-lib.module.ts" file as described below.

```js
@NgModule({
  declarations: [
    ...
  ],
  imports: [
...
  ],
  // Here we export the components so that they can be used in the project where the library is installed
  exports: [
    ...
    NewComponentName
  ],
})

```

- Go to "projects/components-lib/src" folder and export your new component inside "public-api.ts" file as described below.

```js
export * from "./lib/new-component-name/new-component-name.component";
```

- When you finally complete your component, run `ng build components-lib` and then use your new component in WM-COMPONENTS-PROJECT (there is an example below).

Go to "app.component.html" file and add your new library (The first one is a real component and the second one will be your new component)

```java
//This is the existing table component
<lib-table
    [displayedColumns]="['position', 'name', 'weight', 'symbol']"
    [dataSource]="[
    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }
    ]"
    (tableEvent)="handleTableEvent($event)"
>
</lib-table>
//This is your new component
<lib-newComponentName
    //Declare your inputs
    [inputVariable1]="..."
    [inputVariable2]="..."
    //Declare your Outputs
    (outputEvent)="handleOutputEvent($event)"
>
</lib-newComponentName>

```

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