Creating new panels

In version 2.3.0 and higher

Creating custom panels in the sidebar is possible in the Angular part of the application. Your custom panel's component must implement HsPanelComponent like this:

export class MyCoolComponent implements HsPanelComponent {
  data: any;
  viewRef: ViewRef;
  constructor(private hsLayoutService: HsLayoutService) { }

  isVisible() {
    return this.hsLayoutService.panelVisible('cool');
  }
}

And then in your main.service.ts:

import { Injectable } from '@angular/core';
import { HsSidebarService } from 'hslayers-ng/components/sidebar/sidebar.service';
import { HsPanelContainerService } from 'hslayers-ng/components/layout/panels/panel-container.service';
import { MyCoolComponent } from './cool.component';

@Injectable({providedIn: 'root'})
export class MainService {
  constructor(
    private hsSidebarService: HsSidebarService,
    private hsPanelContainerService: HsPanelContainerService
  ) { }

  init(): void {
    this.hsSidebarService.buttons.push({
      panel: 'cool',
      module: '',
      order: 7,
      title: 'My Cool Panel',
      description: 'Open My Cool Panel',
      icon: 'icon-time'
    });
    this.hsPanelContainerService.create(MyCoolComponent, {});
  }
}

In versions 1.x to 2.2.0

inject 'hs.layout.service' in app.js controller as layoutService and 'hs.sidebar.service' as sidebarService Optionally inject also 'gettext' module if you want the button to be translated

Expose panelVisible function:

$scope.panelVisible = layoutService.panelVisible;

$scope.$on("scope_loaded", function (event, args) {`
            `if (args == 'Sidebar') {`
                `var el = angular.element('<div hs.weather.directive hs.draggable ng-controller="hs.weather.controller" ng-if="Core.exists(\'hs.weather.controller\')" ng-show="panelVisible(\'weather\', this)"></div>')[0];`
                `layoutService.panelListElement.appendChild(el);`
                `$compile(el)($scope);`
            `}`
        `})

Add new button to the sidebar:

sidebarService.buttons.push({ panel: 'weather', module: 'hs.weather', order: 10, title: gettext('Weather watcher'), description: gettext('Get weather satellite crossings'), icon: 'icon-time' })