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!