Create a Snackbar to check whether a user is online or offline in Angular in a minute!

A small and easy Angular application to check if user is connected to Internet or not with use of Angular material

Devam Soni
Mar 29 · 2 min read

First of all you have to install a packaged called ng-connection-service. Lets see how do we do that.

Create new Angular application using CLI

ng new Online

Install the ng-connection-service package inside the application from the CLI using:

npm install ng-connection-service — save

Once if you done this process please check your package.json whether it is added or not

You should see something like below,


now, time to install Angular Material into your project using CLI

npm install — save @angular/material @angular/cdk @angular/animations

now, import it in app.component.ts like below:

import {MatSnackBar,MatSnackBarConfig,MatSnackBarHorizontalPosition,MatSnackBarVerticalPosition} from ‘@angular/material’;

Let us finally inject the service inside the component. If you are familiar with service, you’d know that to inject a service, we go to the constructor of the component class and inject it as follows:

constructor(private connectionService: ConnectionService, public snackbar: MatSnackBar){

now the time for write logic of checking the internet connectivity. See the code below:


Final result look like:

final output

Here you can see whenever I turned off my wifi connection Snackbar pop up in bottom and show OFFLINE Status.

JavaScript in Plain English

Learn the web's most important programming language.

Devam Soni

Written by

UI Developer

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade