NTDemoLib

This project library demo for 4 components: Header, Slidebar, Bottom, Login

Demo page: https://nhattranosd.github.io/NTDemo-Lib/

Infrastructure:

--- interfaces
------ interfaces.ts
--- modules
------ ntfooter
------------ ntfooter.component.html
------------ ntfooter.component.scss
------------ ntfooter.component.ts
------------ ntfooter.module.ts
------ ntheader
------------ ntheader.component.html
------------ ntfooter.component.ts
------------ ntfooter.module.ts
------ ntlogin
------------ components
------------------ modal
------------------------ ntmodal.component.ts
------------ ntlogin.component.html
------------ ntlogin.component.scss
------------ ntlogin.component.ts
------------ ntlogin.module.ts
------ ntslide-bar
------------ components
------------------ menuitem
------------------------ menu-item.component.ts
------------ ntslide-bar.component.html
------------ ntslide-bar.component.scss
------------ ntslide-bar.component.ts
------------ ntslide-bar.module.ts

Dependencies

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

Intall npm

NPM link: https://www.npmjs.com/package/nt-demo-library

npm install --save nt-demo-library

How to use NTDemo-Lib

Before start to use NTDemoLib

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

1. Add Bootstrap CSS to styles.scss or styles.css

You also need to add Bootstrap 4 CSS to your application by using your preferred way (it really depends on the setup you're using). Ex. for Angular CLI you can get Bootstrap from npm and update your angular.json with something like:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Or update this on file style.css or style.scss

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

2. Add fontAwesome

You also add Font Awesome's CDN to your project, example via CDN to file index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

3. Install NTDemo-Lib

npm install --save nt-demo-lib

4. Import NTDemo-Lib modules to projects

// Header Module include Header component
import { NTheaderModule } from 'nt-demo-library';
// SlideBarModule inclode SlideBar component
import { NTSlideBarModule } from 'nt-demo-library';
// FooterModule inclode Footer component
import { NTFooterModule } from 'nt-demo-library';
// LoginModule inclode Login component
import { NTLoginModule } from 'nt-demo-library';
...
...
imports: [
    NTLoginModule,
    NTheaderModule,
    NTSlideBarModule,
    NTFooterModule,
  ],

How to use NTheaderModule and NTHeaderComponent

Import Module

// Header Module include Header component
import { NTheaderModule } from 'nt-demo-library';
...
imports: [
    NTheaderModule,
  ],

Template

<NTHeader (onSubmit)="searchSubmit($event)" [headerSettings]="headerSettings"></NTHeader>

Inputs

Name	Type	Description
headerSettings	HeaderSettings Interface	Setting header component

Outputs

Name	Type	Description
onSubmit	string	Search string output with submit event

Setting header on component file such as app.component.ts

  import { HeaderSettings } from 'nt-demo-library';
  ...
  // Init title
  title = 'NT-Demo-lib';
  // Setting header to render
  headerSettings: HeaderSettings = {
    logoUrl: 'https://cdn.worldvectorlogo.com/logos/react.svg',
    orgName: 'OSD',
    searchEnabled: true,
    menuEnabled: true,
    isLogin: true,
    menus: [{ title: 'Menu 1', link: '#1' },
    { title: 'Menu 2', link: '#2' },
    { title: 'Menu 2', link: '#3' }],
    user: {
      userName: 'Nhat Tran',
      profileImage: 'https://img.icons8.com/color/1600/circled-user-male-skin-type-1-2.png',
      tags: [{ detail: 'Your Profile', link: '#' },
      { detail: 'Your Projects', link: '#' },
      { detail: 'Settings', link: '#' },
      { detail: 'Help', link: '#' },
      { detail: 'Sign Out', link: '#' }]
    }
  };

  // Catch submit search string from NTHeader search imput output
  searchSubmit(event): void {
    console.log(event);
  }

How to use NTFooterModule and NTFooterComponent

Import Module

// Footer Module include Footer component
import { NTFooterModule } from 'nt-demo-library';
...
imports: [
    NTFooterModule,
  ],

Template

<NTFooter [title]="bottomTitle"></NTFooter>

Inputs

Name	Type	Description
title	string	Bottom title input

Setting footer on component file such as app.component.ts

// Init bottom title
bottomTitle = 'Orient Software © 2019 All Rights Reserved. Made with love by Orient Team.';

How to use NTSlideBarModule and NTSlideBarComponent

Import Module

// SlideBar Module include SlideBar component
import { NTSlideBarModule } from 'nt-demo-library';
...
imports: [
    NTSlideBarModule,
  ],

Template

<NTSlide-Bar [isOpen]="isOpen" [title]="title" [menuSettings]="menuSettings"></NTSlide-Bar>

<!-- Rounded switch -->
<label class="switch">
    <input (click)="toggle()" type="checkbox" checked>
    <span class="slider round"></span>
</label>

Inputs

Name	Type	Description
title	string	Header title
isOpen	boolean	slide open/close input toggle
menuSettings	Menu Interface	Setting slide bar menu input

Setting slidebar component file such as app.component.ts

import { Menu } from 'nt-demo-library';
...
// Init toggle
isOpen: boolean = true;
// Init slidebar settings to render
menuSettings: Menu = {
      menuItems: [{ title: 'Menu Menu 1', link: 'facebool', icon: 'far fa-address-book fa-2x' },
      { title: 'Menu Menu Menu 2', link: '#', icon: 'fab fa-adn fa-2x' },
      { title: 'Menu Menu Menu 2', link: '#', icon: 'fas fa-ambulance fa-2x' },
      { title: 'Menu Menu Menu 2', link: '#', icon: '' }]
    };

toggle(): void {
  this.isOpen = !this.isOpen;
}

How to use NTLoginModule and NTLoginComponent

Import Module

// Login Module include Login component
import { NTLoginModule } from 'nt-demo-library';
...
imports: [
    NTLoginModule,
  ],

Template

<NTLogin (userName)='getUserName($event)' (passWord)='getPassWord($event)'
                (rememberMe)='getRememberMe($event)' (submited)='getSubmited($event)'></NTLogin>

Outputs

Name	Type	Description
userName	string	UserName value
passWord	string	passWord value
rememberMe	boolean	rememberMe value
submited	boolean	search submit event

Setting Login on component file such as app.component.ts

// Catch UserName from LoginComponent output
public getUserName(event): void {
  console.log(event);
}

// Catch PassWord from LoginComponent output
public getPassWord(event): void {
  console.log(event);
}

// Catch RememberMe from LoginComponent output
public getRememberMe(event): void {
  console.log(event);
}

// Catch submit event from LoginComponent output
public getSubmited(event): void {
  console.log(event);
}

Demo page using 4 components: Header, SlideBar, Footer, Login

All sample use modules and components in here: https://github.com/TalentVN/NTDemo-Lib/tree/master/src/test