adding documentation for InternetConnectionService

docs/en/UI/Angular/Internet-Connection-Service.md

@@ -0,0 +1,71 @@
+# Internet Connection Service
+`InternetConnectionService` is a service which is exposed by `@abp/ng.core` package. **If you want to detect whether you are connected to the internet or not, you can use this service.**
+
+
+### internet-connection-service.ts
+```
+import { DOCUMENT } from  '@angular/common';
+import { Injectable, computed, inject, signal } from  '@angular/core';
+import { BehaviorSubject } from  'rxjs';
+
+@Injectable({
+	providedIn: 'root',
+})
+
+export  class  InternetConnectionService{
+	protected  readonly  window  =  inject(DOCUMENT).defaultView;
+	protected  readonly  navigator  =  this.window.navigator;
+
+	/* BehaviorSubject */
+	private  status$  =  new  BehaviorSubject<boolean>(navigator.onLine)
+
+	/* creates writableSignal */
+	private  status  =  signal(navigator.onLine);
+
+	/* READONLY ANGULAR SIGNAL */
+	networkStatus  =  computed(() =>  this.status())
+
+	constructor(){
+		this.window.addEventListener('offline', () =>  this.setStatus());
+		this.window.addEventListener('online', () =>  this.setStatus());
+	}
+
+	private  setStatus(){
+		this.status.set(navigator.onLine)
+		this.status$.next(navigator.onLine)
+	}
+
+	/* returns OBSERVABLE */
+	get  networkStatus$(){
+		return  this.status$.asObservable()
+	}
+}
+```
+
+## Getting Started
+When you inject InternetConnectionService you can get the current internet status also if status changes you can catch them immediately.
+
+As you can see from the code above, `InternetConnectionService` is providing 2 alternatives for catching network status;
+1. Signal (readonly)
+2. Observable
+
+
+# How To Use
+İt's easy just inject the service and get network status
+
+**You can get via signal**
+```
+class someComponent{
+	internetConnectionService  =  inject(InternetConnectionService);
+	isOnline = this.internetConnectionService.networkStatus
+}
+```
+**or you can get as observable**
+```
+class someComponent{
+	internetConnectionService = inject(InternetConnectionService);
+	isOnline = this.internetConnectionService.networkStatus$
+}
+```
+
+That's all, feel free to try on your template

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

@@ -7,7 +7,7 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
   standalone: true,
   imports:[NgIf, LocalizationModule],
   template: `
-    <div class="status-icon" *ngIf="!isOffline()">
+    <div class="status-icon" *ngIf="!isOnline()">
       <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
       </i>
     </div>
@@ -43,5 +43,5 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core';
 })
 export class InternetConnectionStatusComponent{
   internetConnectionService = inject(InternetConnectionService);
-  isOffline = this.internetConnectionService.networkStatus
+  isOnline = this.internetConnectionService.networkStatus
 }