npm package: @seniorbr/ngx-internet-connectivity
Description: Possibilita a detecção de status atual da conetcividade com a internet.   Utiliza a lib [Offline.js](http://github.hubspot.com/offline/docs/welcome/).
Latest version: 1.0.0

# NgxInternetConnectivity

Possibilita a detecção de status atual da conetcividade com a internet.  
Utiliza a lib [Offline.js](http://github.hubspot.com/offline/docs/welcome/).

## Instalação
npm i offline-js  
npm i @seniorbr/ngx-internet-connectivity

## Configuração
### Importe no modulo ROOT
```javascript
import { InternetConnectivityModule, InternetConnectivityConfigs } from '@seniorbr/ngx-internet-connectivity';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,  // <-- o HttpClientModule é uma dependência e precisa ser importado;
    InternetConnectivityModule.forRoot({
      testUrl: 'https://sam-api.senior.com.br/api/v1/server/status' // <-- parametro opcional. Se omitido, utiliza metodo original. Veja https://github.com/HubSpot/offline#checking;
    } as InternetConnectivityConfigs),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
### Importe em feature modules
```javascript
import { InternetConnectivityModule } from '@seniorbr/ngx-internet-connectivity';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    InternetConnectivityModule,
  ],
  exports: [FeatureComponent]
})
```


## Uso
### Reagindo à detecção do status da conexão
```javascript
import { Component, OnInit } from '@angular/core';
import { InternetConnectivityService } from '@seniorbr/ngx-internet-connectivity';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private onlineSubscription: Subscription;
  private offlineSubscription: Subscription;

  constructor(
    public internetConnectivityService: InternetConnectivityService
  ) {}

  ngOnInit() {
    this.subscribeToOfflineListeners();
  }

  subscribeToOfflineListeners() {
    this.onlineSubscription = this.internetConnectivityService
      .onOnline()
      .subscribe(() => console.log('onOnline'));
    this.offlineSubscription = this.internetConnectivityService
      .onOffline()
      .subscribe(() => console.log('onOffline'));
  }

  unsubscribeFromOfflineListeners() {
    this.onlineSubscription.unsubscribe();
    this.offlineSubscription.unsubscribe();
  }
}
```

### Aplicando classes dependendo do status da conectividade
```html
<section>
  <div internetOn="display-unset" internetOff="display-none">
    Online
  </div>
  <div internetOn="display-none" internetOff="display-unset">
    Offline
  </div>
  <h1 class="home-page-title">
    Offline detection page
  </h1>
  <button (click)="unsubscribeFromOfflineListeners()">stop listening connection</button>
  <button (click)="subscribeToOfflineListeners()">start listening connection</button>
</section>
```

```css
.display-none {
  display: none;
}

.display-unset {
  display: unset;
}
```