import { NgxAdminLteModule } from 'ngx-admin-lte';

@NgModule({
// ...
imports: [
  // ...
  NgxAdminLteModule,

import { CanActivateGuard, LayoutAuthComponent } from 'ngx-admin-lte';
  ...
  const routes: Routes = [
    // logged routes
    {
      canActivate: [CanActivateGuard],
      children: [
        {
          canActivate: [CanActivateGuard],
          component: HomeComponent,
          path: 'home'
        },
        {
          canActivate: [CanActivateGuard],
          component: PageNumComponent,
          path: 'page/:id'
        },
      ],
      component: LayoutAuthComponent,
      path: '',
    },
    // not logged routes
    {
      component: LayoutLoginComponent,
      path: 'login'
    },
    {
      component: RegisterComponent,
      path: 'register'
    }
  ];

component: LayoutAuthComponent,
  data: [{
      'skin': 'skin-black',
      /*
      // USE THIS IS YOU WANT TO HIDE SOME TEMPLATE PART
      'boxed_style': false,
      'display_tasks': false,
      'display_control': false,
      'display_user': false,
      'display_messages': false,
      'display_notifications': false,
      'display_menu_user': false,
      'display_menu_search': false,
      'display_logout': true,
      'display_control_sidebar': true,
      header_components: []
      */
    }],

constructor(
    private breadServ: BreadcrumbService
  ) {

  public ngOnInit() {
    // settings the header for the home
    this.breadServ.setCurrent({
      description: 'HomePage',
      display: true,
      header: 'Dashboard',
      levels: [
        {
          icon: 'dashboard',
          link: ['/'],
          title: 'Home'
        }
      ]
    });
  }

  public ngOnDestroy() {
    // removing the header
    this.breadServ.clear();
  }

import { CanActivateGuard } from 'ngx-admin-lte';

  // ...
  {
    component: MyComponent,
    canActivate: [CanActivateGuard],
    path: 'mycompo'
  }

constructor(
    private userServ: UserService,
    private router: Router
  ) {

  private login() {
    // DOING SOME BACKOFFICE STUFF ON THE SERVER

    // then if the server said OK, then log the user in js
    if ( 1 === 1 ) {

      const user1 = new User( {
          avatarUrl: 'assets/img/user2-160x160.jpg',
          email: 'weber.antoine@outlook.com',
          firstname: 'WEBER',
          lastname: 'Antoine'
      } );

      user1.connected = true;

      this.userServ.setCurrent( user1 );

      this.router.navigate( ['home'] );
    }
  }

import { LogoService } from 'ngx-admin-lte';

  constructor(
    private logoServ: LogoService
    ){

  // ...

  this.logoServ.setCurrentLogo({
    html_mini; "<b>A</b>LTE",
    html_lg; "<b>Admin</b>LTE",
  });

import { User, MenuService, Message, MessagesService } from 'ngx-admin-lte';

// ...

// define here your own links menu structure
private mylinks: any = [
  {
    'header': 'Custom Header'
  },
  {
    'title': 'Home',
    'icon': 'dashboard',
    'link': ['/']
  },
  {
    'title': 'Sub menu',
    'icon': 'link',
    'sublinks': [
      {
        'title': 'Page 2',
        'link': ['/page/2'],
      },
      {
        'title': 'Page 3',
        'link': ['/page/3'],
      }
    ]
  }
];

constructor(
  private menuServ: MenuService,
  private msgServ: MessagesService
) {

}

public ngOnInit() {
  // define menu
  this.menuServ.setCurrentMenu(this.mylinks);

constructor(
    private msgServ: MessagesService,
    // ...
  ) {
    // ...
  }

  public ngOnInit() {
    // FAKE MESSAGE
    // defining some users
    const user1 = new User( {
        avatarUrl: 'assets/img/user2-160x160.jpg',
        email: 'weber.antoine.pro@gmail.com',
        firstname: 'WEBER',
        lastname: 'Antoine'
    });
    const user2 = new User( {
        avatarUrl: 'assets/img/user2-160x160.jpg',
        email: 'EMAIL',
        firstname: 'FIRSTNAME',
        lastname: 'LASTNAME'
    });

    // sending a test message
    this.msgServ.addMessage( new Message( {
        author: user2,
        content: 'le contenu d\'un message d\'une importance extreme',
        destination: user1,
        title: 'un message super important'
    }) );

constructor(
    ...
    private notifServ: NotificationsService
  ) {
    ...
  }

  public ngOnInit() {
    // sending a test notification
    this.notifServ.addNotification( new Notification( {
        class: 'fa fa-users text-aqua',
        content: '5 new members joined today',
        link: '/page/2'
    }) );

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Device } from '../../models/device';
import { RestService } from "ngx-admin-lte";

@Injectable()
export class DeviceService extends RestService {

  constructor(_http: Http) {
      super(_http);
      this.modelName = 'devices';
      this.setApiUrl('http://my-rest_api_to_contact/devices');
  }

  /*This parts are only needed if you want to have correct types for your datas*/
  public getAll(): Observable<Device[]>{
    return super.getAll().map((tab)=> {
      return <Device[]>tab.map(unit => new Device(unit) );
    });
  }

  public get(id: number): Observable<Device>{
      return super.get(id).map((unit) => <Device>unit);
  }

}

// CONFIGURATION
setApiUrl( url: string)

// HELPERS WITH CACHE
getAllFromLS(maxtime = 0): Array<any>
getFromCache(id): any

// Standard REST functions
getAll(): Observable<any[]>
get(id: number): Observable<any>
add(item: any): Observable<number>
addAll(tab: Array<any>): Observable<Array<number>>
update(id: number, itemToUpdate: any): Observable<number>
delete(id: number): Observable<Response>

new User( {
    avatarUrl: 'assets/img/user2-160x160.jpg',
    email: 'weber.antoine@outlook.com',
    firstname: 'WEBER',
    lastname: 'Antoine'
    //set the language here
    preferredLang: 'fr'
} );

import { User, UserService } from 'ngx-admin-lte';

constructor(
  private _user_serv: UserService
){

ngOnInit(){
  let user = new User({
    firstname: "WEBER",
    lastname: "Antoine",
    email: "why-not-yop@yopmail.com",
    avatarUrl: "assets/img/user2-160x160.jpg"
  });
  this._user_serv.setCurrentUser( user );

import { User, UserService } from 'ngx-admin-lte';

private current_user: User;
constructor(
  private _user_serv : UserService,
){
  //se connecter au modification du user courant
  this._user_serv.current_user.subscribe((user: User) => this.current_user = user);