Include layout-helpers.js
script in the <head>
section of the main layout. Then you can use helper methods to control page layout.
window.layoutHelpers.toggleCollapsed()
import { Component } from '@angular/core';
// Path to `src/app/layout/layout.service.ts` file
import { LayoutService } from './layout/layout.service';
@Component({
selector: 'some-component',
templateUrl: './some-component.component.html'
})
export class LayoutNavbarComponent {
constructor(private layoutService: LayoutService) {}
toggleSidenav() {
this.layoutService.toggleCollapsed();
}
}
export default {
name: 'some-component',
toggleSidenav() {
this.layoutHelpers.toggleCollapsed()
}
}
Method | Description | |
---|---|---|
getLayoutSidenav() |
Returns the .layout-sidenav element (if exists). Otherwise returns null . |
|
getSidenav() |
Returns the .sidenav.layout-sidenav element or .sidenav element within .layout-sidenav (if exists). Otherwise returns null . |
|
getLayoutNavbar() |
Returns the .layout-navbar element (if exists). Otherwise returns null . |
|
getLayoutFooter() |
Returns the .layout-footer element (if exists). Otherwise returns null . |
|
getLayoutContainer() |
Returns the .layout-container element (if exists). Otherwise returns null . |
|
isSmallScreen() |
Returns true if the window width is less than 992px (lg breakpoint). |
|
isLayout1() |
Returns true if the current layout is .layout-1 . |
|
isCollapsed() |
Returns true if the layout sidenav is collapsed. |
|
isFixed() |
Returns true if the layout position is fixed. |
|
isOffcanvas() |
Returns true if the current layout is offcanvas. |
|
isNavbarFixed() |
Returns true if the layout navbar position is fixed. |
|
isFooterFixed() |
Returns true if the layout footer position is fixed. |
|
isReversed() |
Returns true if layout is reversed. |
|
setCollapsed(collapsed, animate = true) |
Collapse / expand layout sidenav. | |
toggleCollapsed(animate = true) |
Toggle layout sidenav. | |
setPosition(fixed, offcanvas) |
Set layout position. Note: If the layout position is fixed and the current layout is .layout-1 , the layout navbar position also will be fixed. |
|
setNavbarFixed(fixed) |
Set layout navbar position. | |
setFooterFixed(fixed) |
Set layout footer position. | |
setReversed(reversed) |
Reverse layout. | |
update() |
Update layout. | |
setAutoUpdate(enable) |
Update layout on window resize. | |
on(event, callback) |
Add an event listener. You can set listener namespace using the next syntax:
|
|
off(event)
|
Remove an event listener. Will remove only events with given namespace, otherwise will remove all events without namespace.
|
|
init() |
Performs layoutHelpers initialization. Invoked automatically after the page loaded.
You need to call this method only if the destroy() method called before.
If layoutHelpers is already initialized, nothing will happen.
|
|
destroy() |
Remove bound events, clean markup and disable layout auto update.
Will remove all bound events except
init events. You will need unbind init events manually using the off() method.
|
You can subscribe / unsubscribe events in two ways:
on()
/ off()
methods (preferred way);
window.addEventListener('layout{EventName}', ...)
/ window.removeEventListener('layout{EventName}', ...)
.
destroy()
method will remove only events bound using the on()
method. So, after destroy, you will need to manually remove events bound using window.addEventListener
.
Examples:
// - Using the on() / off() methods, without namespace:
// Subscribe to `resize` event.
window.layoutHelpers.on('resize', function() {
...
});
// Unsubscribe `resize` event.
window.layoutHelpers.off('resize');
// - Using the on() / off() methods, with `page-1` namespace:
// Subscribe to `resize` event.
window.layoutHelpers.on('resize.page-1', function() {
...
});
// Unsubscribe `resize` event.
window.layoutHelpers.off('resize.page-1');
// - Using window.addEventListener / window.removeEventListener:
function resizeCallback() {
...
}
// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false);
// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false);
Examples:
// - Using the on() / off() methods, without namespace:
// Subscribe to `resize` event.
this.layoutService.on('resize', function() {
...
});
// Unsubscribe `resize` event.
this.layoutService.off('resize');
// - Using the on() / off() methods, with `page-1` namespace:
// Subscribe to `resize` event.
this.layoutService.on('resize.page-1', function() {
...
});
// Unsubscribe `resize` event.
this.layoutService.off('resize.page-1');
// - Using window.addEventListener / window.removeEventListener:
function resizeCallback() {
...
}
// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false);
// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false);
Examples:
// - Using the on() / off() methods, without namespace:
// Subscribe to `resize` event.
this.layoutHelpers.on('resize', function() {
...
})
// Unsubscribe `resize` event.
this.layoutHelpers.off('resize')
// - Using the on() / off() methods, with `page-1` namespace:
// Subscribe to `resize` event.
this.layoutHelpers.on('resize.page-1', function() {
...
})
// Unsubscribe `resize` event.
this.layoutHelpers.off('resize.page-1')
// - Using window.addEventListener / window.removeEventListener:
function resizeCallback() {
...
}
// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false)
// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false)
Event | Description |
---|---|
init |
Triggered after layoutHelpers initialization completed. |
toggle |
Triggered after layout sidenav collapsed / expanded. |
resize |
Delayed window resize event. Default resize event delay: 200ms |