### File

`src/app/shared/network-status/network-status.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-network-status`
styleUrls | `./network-status.component.scss`
templateUrl | `./network-status.component.html`

### Index

###### Properties
noInternetConnection
###### Methods
handleNetworkChange ngOnInit

### Constructor

`constructor(cdr: ChangeDetectorRef)`
Defined in src/app/shared/network-status/network-status.component.ts:10
Parameters :
Name | Type | Optional
cdr | `ChangeDetectorRef` | No

### Methods

handleNetworkChange
`handleNetworkChange()`
Defined in src/app/shared/network-status/network-status.component.ts:18
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/shared/network-status/network-status.component.ts:16
Returns : `void`

### Properties

noInternetConnection
Type : `boolean`
Default value : `!navigator.onLine`
Defined in src/app/shared/network-status/network-status.component.ts:10

    import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

    @Component({
      selector: 'app-network-status',
      templateUrl: './network-status.component.html',
      styleUrls: ['./network-status.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class NetworkStatusComponent implements OnInit {
      noInternetConnection: boolean = !navigator.onLine;

      constructor(private cdr: ChangeDetectorRef) {
        this.handleNetworkChange();
      }

      ngOnInit(): void {}

      handleNetworkChange(): void {
        setTimeout(() => {
          if (!navigator.onLine !== this.noInternetConnection) {
            this.noInternetConnection = !navigator.onLine;
            this.cdr.detectChanges();
          }
          this.handleNetworkChange();
        }, 5000);
      }
    }

    <nav class="navbar navbar-dark background-dark">
      <h1 class="navbar-brand">
        <div *ngIf="noInternetConnection; then offlineBlock; else onlineBlock"></div>
        <ng-template #offlineBlock>
          <strong style="color: red">OFFLINE </strong>
          <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected" />
        </ng-template>
        <ng-template #onlineBlock>
          <strong style="color: lawngreen">ONLINE </strong>
          <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected" />
        </ng-template>
      </h1>
    </nav>

`./network-status.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""