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 either implement HsPanelComponent interface or extend HsPanelBaseComponent like this:

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

  ngOnInit(): void {
    this.hsSidebarService.addButton(
      {
        panel: 'cool',
        module: 'hs.legend',
        order: 1,
        fits: true,
        title: 'PANEL_HEADER.COOL',
        description: 'SIDEBAR.descriptions.COOL',
        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, {});
  }
}

Your new panel's template then can use structure like follows:

<div [hidden]="(isVisible$ | async) === false" class="card mainpanel">
  <hs-panel-header name="custom" [title]="'My Cool Panel'">
  </hs-panel-header>
  <div class="card-body">
    Put your panel content here.
  </div>
</div>

Just don't forget to import {HsPanelHelpersModule} from 'hslayers-ng' and imports: [HsPanelHelpersModule] in your app module.

In older versions

NOTE: Older versions of hslayers-ng are not actively maintained!

In version 2.3.0 to 9.0.0

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, {});
  }
}