If can use the layout components or just use the presentation components of angular-admin-lte.

If you chose to use the layout you will need to:

  1. Create a layout configuration file.
  2. Import the layout module and provide the layout configuration in your main app module.
  3. Update the main app view.
export var adminLteConf = {
  skin: 'blue',
  ...
  sidebarLeftMenu: [
    {label: 'Start', route: '/', iconClasses: 'fa fa-th'},
    ...
  ]
};
import { adminLteConf } from './admin-lte.conf';   //Import the layout configuration.
import { LayoutModule } from 'angular-admin-lte';   //Import the layout module.

@NgModule({
  imports: [
    ...
    LayoutModule.forRoot(adminLteConf),   //Provide the configuration to the layout module.
  ],
  ...
})
export class AppModule {}
<mk-layout-wrapper>
  <mk-layout-sidebar-right>
    Sidebar right HTML
  </mk-layout-sidebar-right>
  <mk-layout-header>
    <mk-layout-header-logo>Logo HTML</mk-layout-header-logo>
    <mk-layout-header-logo-mini>Logo Mini HTML</mk-layout-header-logo-mini>
    Header HTML
  </mk-layout-header>
  <mk-layout-sidebar-left>
    Sidebar left HTML (just above menu)
  </mk-layout-sidebar-left>
  <mk-layout-content>
    <router-outlet></router-outlet>
  </mk-layout-content>
  <mk-layout-footer>
    <mk-layout-footer-left>
      Footer left HTML
    </mk-layout-footer-left>
    <mk-layout-footer-right>
      Footer right HTML
    </mk-layout-footer-right>
  </mk-layout-footer>
</mk-layout-wrapper>
Name Type Default Description
skin string ('blue' | 'black' | 'purple' | 'green' | 'red' | 'yellow' | 'blue-light' | 'black-light' | 'purple-light' | 'green-light' | 'red-light' | 'yellow-light') 'blue' Set the theme skin.
isSidebarLeftCollapsed boolean false Defines if the sidebar left is collapsed.
isSidebarLeftExpandOnOver boolean false Define if sidebar left expand on mouse over.
isSidebarLeftMini boolean false Define if sidebar left minified is visible.
sidebarRightSkin string ('dark' | 'light') 'dark' Set the sidebar right skin.
isSidebarRightCollapsed boolean true Defines if the sidebar right is collapsed.
isSidebarRightOverContent boolean true Defines if sidebar right slide over content.
layout string ('normal' | 'boxed' | 'fixed') 'normal' Define the layout style.
Name Parameters Description
sidebarLeftCollapsed() boolean Programmatically set if sidebar left is collapsed.
sidebarLeftExpandOnOver() boolean Programmatically set if sidebar left expand on over.
sidebarLeftExpandOnOver() boolean Programmatically set if sidebar left expand on over.
setSidebarRightSkin() 'dark' | 'light' Programmatically defines sidebar right skin.
sidebarLeftMini() boolean Programmatically set if sidebar left collapsed is visible.
sidebarRightCollapsed() boolean Programmatically set if sidebar right is collapsed.
sidebarRightOverContent() boolean Programmatically set if sidebar right slide over content.
setSidebarLeftMenu() Array Update sidebar right menu.
setLayout() string Update layout style.
setSkin() string Update theme skin.
Name Parameters Description
isSidebarLeftCollapsed Observable<boolean> Subscribe to sidebar left collapse status.
isSidebarLeftExpandOnOver Observable<boolean> Subscribe to sidebar left expand on over status.
isSidebarLeftMini Observable<boolean> Subscribe to sidebar left mini status.
sidebarRightSkin Observable<string> Subscribe to sidebar right skin.
isSidebarRightCollapsed Observable<boolean> Subscribe to sidebar right collapsed status.
isSidebarRightOverContent Observable<Array> Subscribe to sidebar right over content status.
layout Observable<string> Subscribe to layout style changes.
skin Observable<string> Subscribe to theme skin changes.