# NgBnuby Library
## Installation
```
npm install ng-bnuby --save
```
## Usage
step 1:
Import NgBnubyModule into your app.module.ts
```typescript
@NgModule({
imports: [
NgBnubyModule
]
})
```
step 2:
You are Well Done!.
Now you can Add your favorite Component. (prefix with: `ng-bnuby`)
```html
```
## Components List
### 1. [Datatable](##1-Datatable-Component)
### 2. [Image Upload](##2-image-upload-component)
### 3. [Multi Select](##3-Multi-Select-Component)
### 4. [Side Bar](##4-Side-Bar-Component)
## Components
---
### 1. Datatable Component
### **Dom**
example.component.html
```html
```
### **typescript**
example.component.ts
### Datatable main config
```jsx
table: Datatable = {
style: {
'background-color': 'white'
}
};
```
### Define Header
```jsx
headers: DatatableHeaders = [
{
title: 'Name',
key: 'h1'
},
{
title: 'Test2',
key: 'h2'
},
{
title: 'Tools',
key: 'tools'
}
];
```
#### Define thead style
```jsx
theadStyle: { [klass: string]: any } = {
'border-bottom': '1px solid gray'
};
```
#### Define th style
```jsx
thStyle: { [klass: string]: any } = {
padding: '10px 10px'
};
```
#### Define loading text
```jsx
loadingText: string = 'Data Loading';
```
#### Define no Data text
```jsx
noDataText: string = 'No Data';
```
#### Define Table Item
```jsx
itemSet: DatatableRows = [
{
_item: {},
h1: {
title: 'Hello World'
},
h2: {
title: 'Temporary 2'
},
tools: {
buttons: [
{
html: '',
callback: item => {
console.log(item);
}
},
{
html: '',
callback: item => {
console.log(item);
}
},
{
html: '',
callback: item => {
console.log(item);
}
}
]
}
}
]
```
#### Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| table | Use to define datatable, ex: title, style, class | Datatable | { style: { 'background-color': 'white' } }; |
| theadStyle | Use to define thead Style | CSSStyleDeclaration | { 'border-bottom': '1px solid gray' }`|
| thStyle | Use to define th Style | CSSStyleDeclaration | { padding: '10px 10px' }`|
| tdStyle | Use to define td Style | CSSStyleDeclaration | { padding: '5px 10px', 'border-bottom': '1px solid gray' } |
| * headers | Use to define datatable header | DatatableHeaders | { title: 'Name', key: 'h1' } |
| loadingText | Use to define loading text | string | Data Loading |
| noDataText | Use to define no data text | string | No Data |
| * itemSet | Use to define Table Data | DatatableRows | { ... } |
| isLoading | Use to control loading text | boolean | false |
---
### 2. Image Upload Component
Use `ng-bnuby-image-upload` tag selector
```typescript
```
#### Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| title | Given a title for the image upload | string | `Image Upload` |
| simple | If `false` Use the title attr and size attr | boolean | `false`|
| size | Use to define image upload size | sm, md, lg, fluid | md |
| uploadURL (Require) | The url that file upload. | string | '' |
| uploadedCallback | Use to receive the request callback and return a string for form control value. If status `true`, mean upload succses, otherwise mean fail. | Funtion \| (status: boolean, res: any) => string | null |
| zIndex | Use to change content (image) z-index | number | 0|
---
### 3. Multi Select Component
Use `ng-bnuby-multi-select` multi selector
```typescript
```
#### Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| title | Given a title for the image upload | string | `Image Upload` |
| simple | If `false` Use the title attr and size attr | boolean | `false`|
| options | Use to define the options | ngBnubyOptions | [ { title: 'example', value: 'example', } ]|
| placeholder | Use to define placeholder | string | example |
---
### 4. Side Bar Component
Use `ng-bnuby-side-bar` selector
```typescript
```
#### Methods / Attributes
| Attribute | Description | type | default value |
| - | - | - | - |
| sideBarItems | Use `SideBarItems` to define the sidebar | SideBarItems | Below Example 1 |
Example 1: Basic Usage
```typescript
sideBarItems: SideBarItems = [
[
{
title: 'Home',
icon: 'fa-home',
path: '/home'
},
{
title: 'User',
icon: 'fa-user',
children: [
{
title: 'Management',
icon: 'fa-text',
path: '/user/user-mgt'
},
{
title: 'Setting',
icon: 'fa-text',
path: '/user/setting'
},
],
},
]
]
```