# vg-lib

> Angular library with 4 seperated components for demonstration

Latest version **0.0.2** (published 2019-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vg-lib
pnpm add vg-lib
yarn add vg-lib
bun add vg-lib
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-05-31 |
| First published | 2019-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 110.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hoangpham@kms-technology.com |
| Maintainers | kmshoangpham |

## Links

- npm: https://www.npmjs.com/package/vg-lib
- Repository: https://github.com/kmshoangpham/vggo
- Homepage: https://github.com/kmshoangpham/vggo#readme
- Issues: https://github.com/kmshoangpham/vggo/issues
- npm.io page: https://npm.io/package/vg-lib

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.2 (latest) — 2019-05-31
- 0.0.1 — 2019-05-30

## README

# VgLib

This library has 4 independently components for demostrating the angular techniques:

  + Header component: configurable list of menu links, logo, avatar user, and avatar dropdown profile 
  + Left Sidebar component:  configurable list of navigation links
  + Footeer component: just static information
  + Login component: two way data binding and then show up submitted info

# How to use this library

1. We use bootstrap scss therefore you have to setting bootstrap for your application as following:
   + Install bootstrap with npm:   npm install bootstrap
   + Install jquery with npm (this is bootstrap dependency):   npm install jquery
   + Add bootstrap to you angular application angular.json file
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"                ---> to use bootstrap scss 
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",                          ---> bootstrap dependency  
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"           ---> to use dropdown widget of bootstrap
            ],

2. Install this library with npm: npm install vg-lib

3. Add vg-lib module to your module in order to use the components in your application
   
   import { VgLibModule } from 'vg-lib';
   @ NgModule({imports: [ VgLibModule ] })

4. Using the components in your template:

a) vg-header, Header component :

    <header>
      <vg-header [headerModel]=yourConfigurableHeaderModel></vg-header>
    </header>

    const yourConfigurableHeaderModel = {
      menus: ['Link 1', 'Link 2', 'Link 3'],
      logo: 'http://placehold.it/150x50?text=Logo',
      avatar: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg'
    };

b) vg-leftsidebar, Left Sidebar component :

    <nav>
      <vg-leftsidebar [leftSideBarModel]=yourConfigurableLeftSideBarModel></vg-leftsidebar>
    </nav>

    const yourConfigurableLeftSideBarModel = {
      menus: ['Left Menu Link 1', 'Left Menu Link 2', 'Left Menu Link 3', 'Left Menu Link 4']
    };

c) vg-footer, Footer component :

    <footer>
      <vg-footer></vg-footer>
    </footer>

d) vg-login, Login component :

    <vg-login></vg-login>

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