merging observable and signal to 1 service

npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts

@@ -1,7 +1,6 @@
 import { DOCUMENT } from '@angular/common';
-import { Injectable, inject, signal } from '@angular/core';
+import { Injectable, computed, inject, signal } from '@angular/core';
-import { fromEvent, merge, of } from 'rxjs';
+import { Subject } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -10,23 +9,29 @@ export class InternetConnectionService{
   protected readonly window = inject(DOCUMENT).defaultView;
   protected readonly navigator = this.window.navigator;
 
-  networkStatus$ = merge(
+  /* observable */
-    of(navigator.onLine),
+  private status$ = new Subject<boolean>()
-    fromEvent(window, 'offline'),
-    fromEvent(window, 'online')
-  ).pipe(map(() => navigator.onLine));
-}
 
-@Injectable({
+  /* creates writableSignal */
-  providedIn: 'root',
+  private status = signal(navigator.onLine);
-})
-export class InternetConnectionSignalService{
-  protected readonly window = inject(DOCUMENT).defaultView;
-  protected readonly navigator = this.window.navigator;
-  readonly networkStatus = signal(navigator.onLine);
   
   constructor(){
-    this.window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) });
+    this.window.addEventListener('offline', () => this.setStatus() );
-    this.window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) });
+    this.window.addEventListener('online', () => this.setStatus() );
+  }
+
+  private setStatus(){
+    this.status.set(navigator.onLine)
+    this.status$.next(navigator.onLine)
+  }
+  
+  /* returns READONLY ANGULAR SIGNAL */
+  get networkStatus(){
+    return computed(this.status)
+  }
+
+  /* returns OBSERVABLE */
+  get networkStatus$(){
+    return this.status$
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts

@@ -1,13 +1,14 @@
 import { Component, inject  } from '@angular/core';
-import { NgIf } from '@angular/common'
+import { AsyncPipe, NgIf } from '@angular/common'
-import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.core';
+import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'abp-internet-status',
   standalone: true,
-  imports:[NgIf, LocalizationModule],
+  imports:[NgIf, AsyncPipe, LocalizationModule],
   template: `
-    <div class="status-icon" *ngIf="!isOnline()">
+    <div class="status-icon" *ngIf="!isOffline()">
       <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
       </i>
     </div>
@@ -42,6 +43,6 @@ import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.co
   `]
 })
 export class InternetConnectionStatusComponent{
-  internetConnectionSignalService = inject(InternetConnectionSignalService);
+  internetConnectionService = inject(InternetConnectionService);
-  isOnline = this.internetConnectionSignalService.networkStatus;
+  isOffline = this.internetConnectionService.networkStatus
 }