ngx-adminlte v0.9.3
Current template
<adm-framework>
<!-- Top header -->
<adm-header>
<adm-header-user [user]="loginUser"></adm-header-user>
<adm-header-ctrlbar></adm-header-ctrlbar>
</adm-header>
<!-- Left side column. contains the logo and sidebar -->
<adm-sidebar>
<adm-sidebar-user [user]="loginUser"></adm-sidebar-user>
<adm-sidebar-search></adm-sidebar-search>
<adm-sidebar-treeview [items]="treeViewItems"></adm-sidebar-treeview>
</adm-sidebar>
<!-- content-wrapper -->
<adm-content></adm-content>
<adm-footer></adm-footer>
<!--right side bar-->
<adm-ctrlbar [activeId]="'homeTab'">
<adm-ctrlbar-tab *ngFor="let tab of ctrlBarTabs" [id]="tab.id">
<ng-template adm-ctrlbar-tab-title><i [ngClass]="tab.icon">{{tab.title}}</i></ng-template>
<ng-template adm-ctrlbar-tab-content>
<adm-ctrlbar-item *ngFor="let item of tab.items" [model]="item"></adm-ctrlbar-item>
</ng-template>
</adm-ctrlbar-tab>
</adm-ctrlbar>
</adm-framework>
Prerequisites
Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.
Usage
Install this library, run:
$ npm install ngx-adminlte --save
Import all necessary css libraries:
@import "~font-awesome/css/font-awesome.min.css";
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~admin-lte/dist/css/AdminLTE.min.css";
@import "~admin-lte/dist/css/skins/skin-blue.min.css";
Import 'NgxAdminLteModule' into your 'AppModule'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import NgxAdminLteModule module
import {NgxAdminLteModule} from 'ngx-adminlte';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Import NgxAdminLteModule module
NgxAdminLteModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
More information please check out the ngx-adminlte-example.
Components
<adm-sidebar-treeview>
Support multilevel items and multi labels. Usage
/**
* The model for side bar item.
*/
export class AdmSideBarTreeItem {
// possible type value.
static readonly TYPE_HEADER:string = 'header';
static readonly TYPE_TREEVIEW:string = 'treeview';
// icons.
leftIcon:string;
leftActiveIcon:string;
rightIcon:string;
rightActiveIcon:string;
// item text.
text:string;
// multi labels.
labels:AdmSideBarTreeItemLabel[];
// TYPE_HEADER or TYPE_TREEVIEW.
type:string;
// Indicate if is active status.
isActive:boolean;
// item children to support multilevel.
children:AdmSideBarTreeItem[];
// clicked callback.
clickFn:(item:AdmSideBarTreeItem)=>void;
}
<adm-ctrlbar>
The right side control bar of framework, which is consist of multi tabs. It could easily custom the content from external template with following directives. Usage
<adm-ctrlbar-tab>
The child component of <adm-ctrlbar> to show one tab.
adm-ctrlbar-tab-title
The child directive of <adm-ctrlbar-tab> to indicate the title template.
adm-ctrlbar-tab-content
The child directive of <adm-ctrlbar-tab> to indicate the content template.
<adm-ctrlbar-item>
The built in control bar items. For now, there are four types item:
<adm-ctrlbar [activeId]="'homeTab'">
<adm-ctrlbar-tab [id]="'homeTab'">
<ng-template adm-ctrlbar-tab-title><i class="fa fa-home"></i></ng-template>
<ng-template adm-ctrlbar-tab-content>
<adm-ctrlbar-item *ngFor="let item of ctrlBarItems" [model]="item"></adm-ctrlbar-item>
</ng-template>
</adm-ctrlbar-tab>
</adm-ctrlbar>