This project was generated with Angular CLI version 8.0.1.
- Add ngx-nt-layout module as dependency :
npm install --save ngx-nt-layout
- Import NgxLayoutModule:
//... import { NgxLayoutModule } from 'ngx-nt-layout'; @NgModule({ imports: [ NgxLayoutModule, // ... });
<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'} ]
<app-footer></app-footer>
<app-side-menu></app-side-menu>
Input:
-
[menus]
Set menu list.
Example:
[ {name: 'Home', url: '/'}, {name: 'About Us', url: '/about'} ]
<app-login></app-login>
// 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'}
];
}