diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
index 8d45d26654..45b80c1aeb 100644
--- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
+++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json
@@ -52,6 +52,7 @@
"OthersGroup": "Other",
"Today": "Today",
"Apply": "Apply",
+ "InternetConnectionInfo": "The operation could not be performed. Your internet connection is not available at the moment.",
"CopiedToTheClipboard": "Copied to the clipboard"
}
}
diff --git a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
index 366156564a..f3ede9eb41 100644
--- a/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
+++ b/framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json
@@ -52,6 +52,7 @@
"OthersGroup": "Diğer",
"Today": "Bugün",
"Apply": "Uygula",
+ "InternetConnectionInfo": "İşlem gerçekleştirilemedi. İnternet bağlantısı mevcut değil.",
"CopiedToTheClipboard": "Panoya kopyalandı"
}
}
diff --git a/npm/ng-packs/apps/dev-app/src/app/app.component.ts b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
index a26e745334..44a504b978 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
template: `
+
`,
})
export class AppComponent {}
diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
index 7e903dff0d..b2dc1ba780 100644
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from '@abp/ng.core';
import { registerLocale } from '@abp/ng.core/locale';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { InternetConnectionStatusComponent, ThemeSharedModule } from '@abp/ng.theme.shared';
import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
import { IdentityConfigModule } from '@abp/ng.identity/config';
@@ -39,6 +39,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
ThemeLeptonXModule.forRoot(),
SideMenuLayoutModule.forRoot(),
AccountLayoutModule.forRoot(),
+ InternetConnectionStatusComponent
],
providers: [APP_ROUTE_PROVIDER],
declarations: [AppComponent],
diff --git a/npm/ng-packs/packages/core/src/lib/services/index.ts b/npm/ng-packs/packages/core/src/lib/services/index.ts
index 8ccf802cb7..9b193ab67f 100644
--- a/npm/ng-packs/packages/core/src/lib/services/index.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/index.ts
@@ -20,3 +20,4 @@ export * from './subscription.service';
export * from './track-by.service';
export * from './local-storage.service';
export * from './window.service';
+export * from './internet-connection-service'
diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
new file mode 100644
index 0000000000..a38f429d64
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts
@@ -0,0 +1,18 @@
+import { DOCUMENT } from '@angular/common';
+import { Injectable, inject } from '@angular/core';
+import { fromEvent, merge, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class InternetConnectionService{
+ protected readonly window = inject(DOCUMENT).defaultView;
+ protected readonly navigator = this.window.navigator;
+
+ networkStatus$ = merge(
+ of(navigator.onLine),
+ fromEvent(window, 'offline'),
+ fromEvent(window, 'online')
+ ).pipe(map(() => navigator.onLine))
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
index 238bc19589..3adc055b8c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
@@ -14,3 +14,4 @@ export * from './password/password.component';
export * from './card/index';
export * from './checkbox/checkbox.component';
export * from './form-input/form-input.component';
+export * from './internet-connection-status/internet-connection-status.component'
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
new file mode 100644
index 0000000000..c944e67ac1
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts
@@ -0,0 +1,48 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common'
+import { map } from 'rxjs';
+import { InternetConnectionService, LocalizationModule } from '@abp/ng.core';
+
+@Component({
+ selector: 'abp-internet-status',
+ standalone: true,
+ imports:[CommonModule,LocalizationModule],
+ template: `
+
+
+
+
+ `,
+ styles: [`
+ .blink {
+ animation: blinker 0.9s cubic-bezier(.5, 0, 1, 1) infinite alternate;
+ }
+ @keyframes blinker {
+ 0% { color:#c1c1c1 }
+ 70% { color: #DC3545 }
+ 100% { color: #DC3545 }
+ }
+
+ .text-blinking{
+ font-size:1.2rem;
+ }
+
+ .status-icon{
+ position: fixed;
+ z-index: 999999;
+ top: 10px;
+ right: 10px;
+ }
+
+ @media (width < 768px){
+ .status-icon{
+ top: 26px;
+ right: 134px;
+ }
+ }
+ `]
+})
+export class InternetConnectionStatusComponent{
+ internetConnectionService = inject(InternetConnectionService)
+ isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val));
+}