feat(query): Dynamic info panel

Configure content via QUERY_INFO_PANEL injection token
hslayers · Nov 19, 2024 · 5b5ec2d · 5b5ec2d
1 parent 2eafa5f
commit 5b5ec2d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/projects/hslayers/components/query/public-api.ts b/projects/hslayers/components/query/public-api.ts
@@ -6,3 +6,4 @@ export * from './feature/feature.component';
 export * from './query-wms.service';
 export * from './query-wmts.service';
 export * from './query.component';
+export * from './query.tokens';
diff --git a/projects/hslayers/components/query/query.component.html b/projects/hslayers/components/query/query.component.html
@@ -12,7 +12,7 @@
   </div>
   }
   @if (hsLayoutService.mainpanel === 'query') {
-  <ng-container *ngComponentOutlet="infoPanelComponent">
+  <ng-container *ngComponentOutlet="infoPanelComponent; injector: injector">
   </ng-container>
   }
   @if (hsQueryBaseService?.coordinates !== undefined && hsQueryBaseService?.coordinates.length > 0) {

diff --git a/projects/hslayers/components/query/query.component.ts b/projects/hslayers/components/query/query.component.ts
@@ -1,13 +1,13 @@
 //TODO: Check if this import is still needed. Breaks production though
 //import 'ol-popup/src/ol-popup.css';
-import {Component, Inject, OnInit, Type} from '@angular/core';
+import {Component, Injector, OnInit, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 import Popup from 'ol-popup';
 import {Subject} from 'rxjs';
 import {debounceTime, takeUntil} from 'rxjs/operators';
 
-import {AsyncPipe, NgClass} from '@angular/common';
+import {AsyncPipe, NgClass, NgComponentOutlet} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HsDrawService} from 'hslayers-ng/services/draw';
 import {HsLogService} from 'hslayers-ng/services/log';
@@ -33,12 +33,7 @@ import {TranslateCustomPipe} from 'hslayers-ng/services/language';
     AsyncPipe,
     NgClass,
     FormsModule,
-  ],
-  providers: [
-    {
-      provide: QUERY_INFO_PANEL,
-      useValue: HsQueryDefaultInfoPanelBodyComponent, // Default value
-    },
+    NgComponentOutlet,
   ],
 })
 export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
@@ -48,14 +43,19 @@ export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
   //To deactivate queries (unsubscribe subscribers) per app
   queryDeactivator = new Subject<void>();
 
+  // Inject QUERY_INFO_PANEL if available, otherwise fallback to HsQueryDefaultInfoPanelBodyComponent
+  infoPanelComponent =
+    inject(QUERY_INFO_PANEL, {optional: true}) ||
+    HsQueryDefaultInfoPanelBodyComponent;
+  injector = inject(Injector);
+
   constructor(
     public hsQueryBaseService: HsQueryBaseService,
     private hsMapService: HsMapService,
     private hsLog: HsLogService,
     private hsQueryVectorService: HsQueryVectorService,
     private hsDrawService: HsDrawService,
     private hsQueryWmsService: HsQueryWmsService,
-    @Inject(QUERY_INFO_PANEL) public infoPanelComponent: Type<any>,
   ) {
     super();
   }