Wm Components Project

Introduction

WM Component Project was generated with 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.

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

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)

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