ngx-nt-layout v0.0.2

NgxNTLayout

This project was generated with Angular CLI version 8.0.1.

Setup

• Add ngx-nt-layout module as dependency :

  npm install --save ngx-nt-layout

• Import NgxLayoutModule:

  //...
  import { NgxLayoutModule } from 'ngx-nt-layout';
  
  @NgModule({
    imports: [
      NgxLayoutModule,
    // ...
  });

Usage

HeaderComponent

<app-header></app-header>

Inputs:

• [logo]

  Set logo url

• [avatar]

  Set avatar url

• [menus]

  Set menu list.

  Example:

  [
    {name: 'Home', url: '/'},
    {name: 'About Us', url: '/about'}
  ]

FooterComponent

<app-footer></app-footer>

SideMenuComponent

<app-side-menu></app-side-menu>

Input:

• [menus]

  Set menu list.

  Example:

  [
    {name: 'Home', url: '/'},
    {name: 'About Us', url: '/about'}
  ]

LoginComponent

<app-login></app-login>

Example

// Component code
//...
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: `
    <app-header [logo]="logo" [avatar]="avatar" [menus]="headerMenus"></app-header>
    <div class="row">
      <div class="col-md-2">
        <app-side-menu [menus]="sideMenus"></app-side-menu>
      </div>
      <div class="col-md-10 pt-5">
        <app-login></app-login>
      </div>
    </div>
    <app-footer></app-footer>
  `
})
 
export class AppHomeComponent {
  avatar = 'http://www.myiconfinder.com/uploads/iconsets/256-256-6a9a5acd215316d5cd242192f19ba1ca-user.png';
  logo = 'http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png';
  headerMenus = [
    {name: 'Home', url: '/'},
    {name: 'About Us', url: '/about'},
    {name: 'Products', url: '/product'},
    {name: 'Contact', url: '/contact'}
  ];
  sideMenus = [
    {name: 'Home', url: '/'},
    {name: 'About Us', url: '/about'},
    {name: 'Products', url: '/product'},
    {name: 'Contact', url: '/contact'}
  ];
}