Align destroy calls

projects/ngx-maplibre-gl/src/lib/control/control.component.ts

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  DestroyRef,
   ElementRef,
+  OnDestroy,
   afterNextRender,
   inject,
   input,
@@ -61,10 +61,9 @@ export class CustomControl implements IControl {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })
-export class ControlComponent<T extends IControl> {
+export class ControlComponent<T extends IControl> implements OnDestroy {
   /** Init injection */
   private readonly mapService = inject(MapService);
-  private readonly destroyRef = inject(DestroyRef);
 
   /** Init input */
   readonly position = input<ControlPosition>();
@@ -83,11 +82,11 @@ export class ControlComponent<T extends IControl> {
         });
       }
     });
+  }
 
-    this.destroyRef.onDestroy(() => {
-      if (this.mapService?.mapInstance?.hasControl(this.control)) {
-        this.mapService.removeControl(this.control);
-      }
-    });
+  ngOnDestroy(): void {
+    if (this.mapService?.mapInstance?.hasControl(this.control)) {
+      this.mapService.removeControl(this.control);
+    }
   }
 }

projects/ngx-maplibre-gl/src/lib/image/image.component.ts

@@ -4,6 +4,7 @@ import {
   DestroyRef,
   NgZone,
   OnChanges,
+  OnDestroy,
   OnInit,
   SimpleChanges,
   inject,
@@ -54,7 +55,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ImageComponent implements OnInit, OnChanges {
+export class ImageComponent implements OnInit, OnChanges, OnDestroy {
   /** Init injection */
   private readonly mapService = inject(MapService);
   private readonly destroyRef = inject(DestroyRef);
@@ -79,10 +80,6 @@ export class ImageComponent implements OnInit, OnChanges {
   private isAdded = signal(false);
   private isAdding = signal(false);
 
-  constructor() {
-    this.destroyRef.onDestroy(() => this.removeImage());
-  }
-
   ngOnInit() {
     this.mapService.mapLoaded$
       .pipe(
@@ -112,6 +109,10 @@ export class ImageComponent implements OnInit, OnChanges {
     }
   }
 
+  ngOnDestroy(): void {
+    this.removeImage()
+  }
+
   removeImage() {
     if (this.isAdded()) {
       this.mapService.removeImage(this.id());

projects/ngx-maplibre-gl/src/lib/layer/layer.component.ts

@@ -145,7 +145,7 @@ export class LayerComponent
     }
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.layerAdded()) {
       const sourceIdAdded = this.sourceIdAdded();
       this.mapService.removeLayer(this.id());

projects/ngx-maplibre-gl/src/lib/map/map.component.ts

@@ -347,7 +347,7 @@ export class MapComponent implements OnChanges, OnDestroy, MapEvent {
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.mapService.destroyMap();
   }
 

projects/ngx-maplibre-gl/src/lib/marker/marker.component.ts

@@ -4,6 +4,7 @@ import {
   DestroyRef,
   ElementRef,
   OnChanges,
+  OnDestroy,
   OnInit,
   SimpleChanges,
   ViewEncapsulation,
@@ -45,7 +46,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })
-export class MarkerComponent implements OnChanges, OnInit {
+export class MarkerComponent implements OnChanges, OnInit, OnDestroy {
   /** Init injection */
   private readonly mapService = inject(MapService);
   private readonly destroyRef = inject(DestroyRef);
@@ -109,8 +110,10 @@ export class MarkerComponent implements OnChanges, OnInit {
           this.markerInstance.set(marker);
         });
     });
+  }
 
-    this.destroyRef.onDestroy(() => this.removeMarker());
+  ngOnDestroy(): void {
+    this.removeMarker();
   }
 
   ngOnInit() {

projects/ngx-maplibre-gl/src/lib/popup/popup.component.ts

@@ -4,6 +4,7 @@ import {
   DestroyRef,
   ElementRef,
   OnChanges,
+  OnDestroy,
   OnInit,
   SimpleChanges,
   afterNextRender,
@@ -43,7 +44,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })
-export class PopupComponent implements OnChanges, OnInit {
+export class PopupComponent implements OnChanges, OnInit, OnDestroy {
   /** Init injection */
   private readonly destroyRef = inject(DestroyRef);
   private readonly mapService = inject(MapService);
@@ -105,8 +106,6 @@ export class PopupComponent implements OnChanges, OnInit {
         .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe();
     });
-
-    this.destroyRef.onDestroy(() => this.removePopupFromMarker());
   }
 
   ngOnInit() {
@@ -157,6 +156,10 @@ export class PopupComponent implements OnChanges, OnInit {
     }
   }
 
+  ngOnDestroy(): void {
+    this.removePopupFromMarker();
+  }
+
   private createPopup() {
     return this.mapService.createPopup(
       {

projects/ngx-maplibre-gl/src/lib/source/geojson/feature.component.ts

@@ -52,7 +52,7 @@ export class FeatureComponent implements OnInit, OnDestroy {
     this.geoJSONSourceComponent._addFeature(this.feature);
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.geoJSONSourceComponent._removeFeature(this.feature);
   }
 

projects/ngx-maplibre-gl/src/lib/source/image-source.component.ts

@@ -65,7 +65,7 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     const sourceId = this.sourceId();
     if (sourceId !== null) {
       this.mapService.removeSource(sourceId);

projects/ngx-maplibre-gl/src/lib/source/source.directive.ts

@@ -1,6 +1,7 @@
 import {
   DestroyRef,
   Directive,
+  OnDestroy,
   OnInit,
   inject,
   input,
@@ -19,7 +20,7 @@ import { Source, SourceSpecification } from 'maplibre-gl';
 @Directive({
   standalone: true,
 })
-export class SourceDirective implements OnInit {
+export class SourceDirective implements OnInit, OnDestroy {
   /** Init injection */
   readonly mapService = inject(MapService);
   private readonly destroyRef = inject(DestroyRef);
@@ -35,10 +36,6 @@ export class SourceDirective implements OnInit {
   private readonly loadSourceSubject = new Subject<void>();
   readonly loadSource$ = this.loadSourceSubject.asObservable();
 
-  constructor() {
-    this.destroyRef.onDestroy(() => this.removeSource());
-  }
-
   ngOnInit() {
     this.mapService.mapLoaded$
       .pipe(
@@ -54,6 +51,10 @@ export class SourceDirective implements OnInit {
       .subscribe();
   }
 
+  ngOnDestroy(): void {
+    this.removeSource();
+  }
+
   refresh() {
     this.removeSource();
     this.loadSourceSubject.next();

projects/showcase/src/app/demo/examples/live-update-feature.component.ts

@@ -69,7 +69,7 @@ export class LiveUpdateFeatureComponent implements OnDestroy {
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.timer) {
       clearInterval(this.timer);
     }

projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts

@@ -76,7 +76,7 @@ export class LiveUpdateImageSourceComponent implements OnDestroy {
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.timer !== undefined) {
       clearInterval(this.timer);
     }

projects/showcase/src/app/demo/examples/marker-alignment.component.ts

@@ -63,7 +63,7 @@ export class MarkerAlignmentComponent implements OnDestroy {
     })
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.timer) {
       clearInterval(this.timer);
     }

projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts

@@ -6,8 +6,7 @@ import {
   viewChild,
   input,
   signal,
-  inject,
-  DestroyRef,
+  OnDestroy,
 } from '@angular/core';
 import {
   MatPaginator,
@@ -139,8 +138,8 @@ export class ClusterPopupComponent implements OnChanges {
     ClusterPopupComponent,
   ],
 })
-export class NgxClusterHtmlComponent {
-  private destroyRef = inject(DestroyRef);
+export class NgxClusterHtmlComponent implements OnDestroy {
+  private timer: ReturnType<typeof setInterval>;
   readonly earthquakes = signal<GeoJSON.FeatureCollection | null>(null);
 
   readonly selectedCluster = signal<{
@@ -149,19 +148,20 @@ export class NgxClusterHtmlComponent {
   } | null>(null);
 
   constructor() {
-    let timer: ReturnType<typeof setInterval>;
     afterNextRender(async () => {
       const earthquakes: GeoJSON.FeatureCollection = (await import(
         './earthquakes.geo.json'
       )) as any;
-      timer = setInterval(() => {
+      this.timer = setInterval(() => {
         if (earthquakes.features.length) {
           earthquakes.features.pop();
         }
         this.earthquakes.set({ ...earthquakes });
       }, 500);
     });
-    this.destroyRef.onDestroy(() => clearInterval(timer));
+  }
+  ngOnDestroy(): void {
+    clearInterval(this.timer)
   }
 
   selectCluster(event: MouseEvent, feature: any) {

projects/showcase/src/app/demo/stackblitz-edit/stackblitz-edit.component.ts

@@ -73,7 +73,7 @@ export class StackblitzEditComponent implements AfterViewInit, OnDestroy {
     private changeDetectorRef: ChangeDetectorRef
   ) {}
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.sub) {
       this.sub.unsubscribe();
     }

projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts

@@ -3,8 +3,8 @@ import {
   ApplicationRef,
   Component,
   ComponentFactoryResolver,
-  DestroyRef,
   Injector,
+  OnDestroy,
   afterNextRender,
   inject,
   input,
@@ -21,10 +21,9 @@ import {
   standalone: true,
   imports: [PortalModule],
 })
-export class LayoutToolbarMenuComponent {
+export class LayoutToolbarMenuComponent implements OnDestroy {
   private readonly componentFactoryResolver = inject(ComponentFactoryResolver);
   private readonly injector = inject(Injector);
-  private readonly destroyRef = inject(DestroyRef);
   private readonly appRef = inject(ApplicationRef);
 
   readonly position = input<'left' | 'right'>();
@@ -46,7 +45,9 @@ export class LayoutToolbarMenuComponent {
       );
       this.portalOutlet.attach(this.portal());
     });
+  }
 
-    this.destroyRef.onDestroy(() => this.portalOutlet?.detach());
+  ngOnDestroy(): void {
+    this.portalOutlet?.detach()
   }
 }