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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify library as an import
    OfflineModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component, ViewContainerRef} from '@angular/core';
import {OfflineNotificationService, OfflineService} from 'ngx-offline';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  offline$: Observable<boolean>;

  constructor(private viewContainerRef: ViewContainerRef, private offlineService: OfflineService, private offlineNotificationService: OfflineNotificationService) {
    // Initialize offline service
    this.offlineService.init(this.viewContainerRef);

    // Use observable(true/false) to identify if you are offline/online in other services, components...
    this.offline$ = this.offlineNotificationService.offline;
  }
}