Introduce

This library have 4 demo template: Header, Sidebar, Footer, Login.

Dependencies

| ng-bootstrap | Angular | fortawesome | | ------------ | ------- | ------------| | 4.x.x | 7.x.x | 4.x.x |

Installation

npm install pg-template --save

Setup

1. Install another libary

Please help me to make sure your project installed some dependencies:

• ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

• boostrap

npm install --save bootstrap

• font-awesome

npm i @fortawesome/fontawesome-free

2. Add bootstrap and fontawesome to styles

Open file angular.json and update in your project like:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css"
]

3. Import PgTemplateModule into project

import { PgTemplateModule } from 'pg-template';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    PgTemplateModule,
    ...
  ],
})

Use

1. Header template

Template

<enl-header-template
    [logoImage] = "logoImage"
    [logoUrl]="homeUrl"
    [menuItems] = "menuItems" 
    [backgroundColor]="backgroundColor"
    [color] = "color"
    [userDropdown] = "userDropdown">
</enl-header-template>

Input

| Option | Type | Default | Description | | --------------- | --------------- | ------------- | ----------------------------------------------------------------- | | logoImage | string | null | input url of a image | | logoUrl | string | null | click logoImage, it will redirect to this url | | menuItems | Array(MenuItem) | [] | show list tag on header | | backgroundColor | string | #ffffff | background color for header | | color | string | #007bff | word color on side bar | | userDropdown | Array(UserMenu) | null | show user dropdown |

Example

import { MenuItem, UserMenu } from 'pg-template/lib/pg-template.model';

homeUrl = 'http://localhost:4200/home';
logoImage = '../assets/image/angular-logo.png';
color = '#000000';

userDropdown: UserMenu = { userName: '[email protected]',
                           avatar: '../assets/image/img_avatar.png',
                           menuItems: [{label: 'Infor', url: 'home'},
                                       {label: 'Setting', url: 'setting'},
                                       {label: 'Log out', url: 'log-out'}]
                        };

menuItems: MenuItem[] = [
                         {label: 'Home', url: 'home'}, 
                         {label: 'Link', url: 'link'}
                        ];

2. Sidbar Template

Template

<enl-side-bar-template 
    [backgroundColor]="backgroundColor" 
    [color] = "color"
    [sideBarItems] = "sideBarItems">
</enl-side-bar-template>

Input

| Option | Type | Default | Description | | --------------- | ------------------ | ------------- | -------------------------------------| | backgroundColor | string | #ffffff | background color for header | | color | string | #000000 | word color on side bar | | sideBarItems | Array(SideBarItem) | null | show list tag on side bar |

Example

sideBarItems: SideBarItem[] = [
                                {label : 'Home', logo: 'fas fa-home', url: 'home', active: false},
                                {label : 'News', logo: 'fas fa-newspaper', url: 'news', active: false},
                                {label : 'Contact', logo: 'fas fa-id-card', url: 'contact', active: false},
                                {label : 'About', logo: 'fas fa-angry', url: 'about', active: false}
                            ];

3. Footer Template

Template

<enl-footer-template>&copy; Copyright 2019 </enl-footer-template>

4. Login Template

Template

<enl-login-template 
    [title]="'Login Admin'"
    (userLogin)="onLogin($event)">
</enl-login-template>

| Decorator | Option | Type | Default | Description | | ----------- | --------------- | --------------------- | ------------- | -------------------------------------------- | | @Input | title | string | 'Login' | show title in login template | | @Output | userLogin | EventEmitter| | Emit LoginUser instance to external component|

Example

onLogin(event: UserLogin) {
    console.log(event);
}