navneetlal / ng-offline

Angular directive which checks whether network connectivity is available or not.

NgOffline

A simple angular module which enables directives ngOnline and ngOffline to make conditional rendering of component based on network status.

Installing

$ npm install ng-offline --save

Basic usage

Import NgOfflineModule into your ngModule and start using directives ngOnline and ngOffline within your html component.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgOfflineModule } from 'ng-offline';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgOfflineModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div ngOnline>Hey! You are online</div>
<div ngOffline>You're offline. Check your connection!</div>

First div container will only be visible when network status in online and second div will be visible after network status in offline.

License

Published under the MIT License.