Creating new panels

In version 9.1.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:

import {HsPanelBaseComponent} from 'hslayers-ng';
export class MyCoolComponent extends HsPanelBaseComponent implements OnInit {
  name = 'cool';
  constructor(private hsLayoutService: HsLayoutService) { 
     super(hsLayoutService);
  }

  ngOnInit(): void {
    this.hsSidebarService.addButton(
      {
        panel: 'legend',
        module: 'hs.legend',
        order: 1,
        fits: true,
        title: 'PANEL_HEADER.LEGEND',
        description: 'SIDEBAR.descriptions.LEGEND',
        icon: 'icon-dotlist',
      },
      this.data.app
    );
   }
}

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 hsPanelContainerService: HsPanelContainerService
  ) { }

  init(): void {    
    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' })