Angular – How to Detect IE & Other Browser Name Tutorial by Example

In this tutorial, you will get to know how to check the name of the browser with the version in modern single-page applications like Angular. After going through the tutorial, you can easily detect if the Angular application is loaded inside the IE Legacy, Edge, Firefox, Chrome, Safari, Opera or any other browser.

In today’s era, we have many latest web browsers available in the market which are fully compatible with the latest WebKit to support modern Javascript and CSS principles. But sometimes the applications built using the latest version of ES6 or CSS properties may break in legacy browsers like IE 7, 8, 9, 10, 11 or Safari for Windows which are using primitive web-kits to support modern development methods.

In such a case, we need to detect the browser name and version to inform the visitors that this browser or its version is incompatible to load the application properly, and they can switch to the latest available browsers.

In this step-by-step tutorial, you learn how to add a simple reusable method in your application and easily detect the browser and its version. We will be using the simple Javascript code that will work in both modern and legacy browsers. You can easily pick this function to use in other Javascript applications using React, Vue etc.

How to Check Browser Name & Version in Angular Application?

• Step 1 – Create Browser Checker Service
• Step 2 – Adding Browser Name & Version Detection Method
• Step 3 – Display Browser Name & Version in App
• Step 4 – Run Application

Step 1 – Create Browser Checker Service

You can create a separate service in your Angular application by executing the below command:

ng g s services/detect-browser

This will create a new service at this location ~src\app\services\detect-browser.service.ts with the following content as boilerplate:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DetectBrowserService {

  constructor() { }
}

Step 2 – Adding Browser Name & Version Detection Method

After creating the DetectBrowserService, add the getBrowserNameAndVersion() method to return an object with name and version keys. This method will fetch the User-Agent strings on the browser in which the Angular application is loaded.

Open the ~app\services\detect-browser.service.ts file and update as shown below:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DetectBrowserService {

  constructor() { }

  getBrowserNameAndVersion() {
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bEdg\/(\d+)/)
        if(tem!=null)   {return {name:'Edge(Chromium)', version:tem[1]};}
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
  }

}

Step 3 – Display Browser Name & Version in App

Now, we will import the DetectBrowserService in the AppComponent‘s constructor function. The service instance method named getBrowserNameAndVersion() will assign the name and version object to the browserNameAndVersion variable.

Open the app.component.ts file and update as shown below:

import { Component } from '@angular/core';
import { DetectBrowserService } from './services/detect-browser.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Display Browser Name & Version';
  
  browserNameAndVersion:any;

  constructor(
    detectBrowserService: DetectBrowserService
  ){
    this.browserNameAndVersion = detectBrowserService.getBrowserNameAndVersion();
  }
}

<h1>{{title}}</h1>
<h4>Browser Name: {{browserNameAndVersion.name}}</h4>
<h4>Browser Version: {{browserNameAndVersion.version}}</h4>

Step 4 – Run Application

Finally, run the application by executing ng serve --open command in the terminal window. It opens the application at the following URL:

http://localhost:4200/

Chrome Browser

Edge Browser

You can see it in Action on StackBlitz:

Conclusion

We discussed how to detect name and version of browser by creating a new service with a common method. The getBrowserNameAndVersion method returns an object with name and version keys. This method is fetching the User-Agent string that provides the browser information.