nituits-components v0.0.9
InuitsUiComponents
This is a very first attempt in gathering some reusable UI components.
this excellent tutorial explains how this project is to be used for managing components: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
Demo's on how components are to be used can be found in the app-component.
This project contains following components:
- navigation bar
Installation
npm install nituits-component-library --save
Components
navigation bar
This is a two-level drop down menu bar. When scaled down, the menu will transform into a mobilefriendly menu. Tons of room for improvement.
navigation bar usage
In app.module.ts (or the module you are working in)
import { NavbarModule } from 'nituits-component-library';
Also in app.module.ts (or the module you are working in) make sure to add to imports
@NgModule({ imports: ..., HeaderModule , ...
In your component.ts, define an array of menu item objects.
this.menuItems = [ { id: "10402", label: "Home", locale: "nl", children: [], slug: "home" }, { id: "10412", label: "Animals", locale: "nl", children: [ { id: "10413", label: "Cow", locale: "nl", children: [], slug: "cow" }, { id: "10414", label: "Hedgehog", locale: "nl", children: [], slug: "hedgehog" } ], slug: "animals" }, { id: "10412", label: "Plants", locale: "nl", children: [ { id: "10413", label: "Powerplant", locale: "nl", children: [], slug: "powerplant" }, { id: "10414", label: "Transplant", locale: "nl", children: [], slug: "transplant" } ], slug: "plants" } ];
In your view and component.ts use the nav bar with this magic:
<app-navbar items="menuItems" logoSvg="http://www.johandegrieck.be/werk/img/logo.svg">
Running the component demo app
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.
Adding new modules and components to this lib
ng generate module modules/mymodulename
ng generate component modules/mycomponentname
NPM packaging
As described in tutorial mentioned above, an npm package of your module can be created using following commands:
npm run packagr
note: when following build error appears 'BUILD ERROR Dependency @angular/animations must be explicitly whitelisted.' make sure to whitelist the package in ng-package.json
...
"whitelistedNonPeerDependencies": ["."]
...
cd into the dist folder and run
npm pack
then login to npm using inuits account
npm login
Make sure you incremented the version number in package.json , go back to project folder and install the library to npm using this command:
npm publish dist
Voilà, your package should have been published on npm now. Open source contribution gets reel!