pg-template v1.0.3

Introduce

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

Dependencies

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

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: 'phunghandsome@gmail.com',
                           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

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>

Example

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