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
Methods

Constructor

constructor(cdr: ChangeDetectorRef)
Parameters :
Name Type Optional
cdr ChangeDetectorRef No

Methods

handleNetworkChange
handleNetworkChange()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

noInternetConnection
Type : boolean
Default value : !navigator.onLine
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 ""