wm-components-project v0.0.1
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
- 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>
2 months ago