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:
- Create a layout configuration file.
- Import the layout module and provide the layout configuration in your main app module.
- 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. |