ngx-adminlte

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:

• AdmCtrlBarHeaderItem
• AdmCtrlBarInfoBoxItem
• AdmCtrlBarCheckBoxItem
• AdmCtrlBarProgressItem

 
<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>
 

License

MIT