Welcome folks today in this blog post we will be using the ngx-online-status
library to track internet connection
of website visitor in browser using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleapp
cd sampleapp
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-online-status
After that you will see the below directory
structure of the angular app as shown below
And now you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { OnlineStatusModule } from 'ngx-online-status'; @NgModule({ imports: [ BrowserModule, OnlineStatusModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
As you can see we are importing the ngx-online-status
library at the top and then adding the OnlineStatusModule
inside the imports array.
Now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="status" [class.offline]="status === OnlineStatusType.OFFLINE"> {{ OnlineStatusType.OFFLINE ? 'Offline' : 'Online' }} </div> <div style="text-align:center"> <h1> ngx-online-status </h1> <p> Try this package by turning on and off your internet connection </p> </div> |
As you can see in the above html code we are showing the current status
of the internet
connection such as showing if the user is offline
or online
depending upon the internet
connection.
Now we need to go to app.component.css
file and copy paste the following code
app.component.css
1 2 3 4 5 6 7 8 9 10 11 12 |
.status { height: 48px; background-color: #00c000; text-align: center; color: #fff; line-height: 48px; transition: background-color 1s ease; } .status.offline { background-color: grey; } |
Now we need to go to app.component.ts
file and copy paste the following code which is shown below
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; import { OnlineStatusService, OnlineStatusType } from 'ngx-online-status'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { status: OnlineStatusType; OnlineStatusType = OnlineStatusType; constructor(private onlineStatusService: OnlineStatusService) { this.onlineStatusService.status.subscribe((status: OnlineStatusType) => { // use status this.status = status; }); } } |
As you can see we are importing the ngx-online-status
library and from this we are using the OnlineStatusService
to track the internet connection by using the subscribe()
method. And then we are changing the status
variable to either online
or offline
which is coming from the OnlineStatusService
method.