How To Get Browser Version And Name In Angular

You will discover how to obtain the browser name and version in the Angular application in this article. When using Angular, you may occasionally need to obtain the name of the browser or the version of the browser.

Let’s obtain the browser name & version by following below steps:

Step 1: Create New Angular Project

To create a new project just hit the below command in the terminal.

ng new browser-demo

Following the execution of the command, a skeleton project with a collection of files was automatically created in the folder browser-demo.

Step 2: Update Typescript Template

Copy the code from below and paste it to app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'browser-demo';
  browserName = '';
  browserVersion = '';
  
  ngOnInit() {
      this.browserName = this.detectBrowserName();
      this.browserVersion = this.detectBrowserVersion();
  }
   
  detectBrowserName() { 
    const agent = window.navigator.userAgent.toLowerCase()
    switch (true) {
      case agent.indexOf('edg') > -1:
        return 'edg';
      case agent.indexOf('opr') > -1 && !!(<any>window).opr:
        return 'opera';
      case agent.indexOf('chrome') > -1 && !!(<any>window).chrome:
        return 'chrome';
      case agent.indexOf('trident') > -1:
        return 'ie';
      case agent.indexOf('firefox') > -1:
        return 'firefox';
      case agent.indexOf('safari') > -1:
        return 'safari';
      default:
        return 'other';
    }
  }
   
  detectBrowserVersion(){
      var userAgent = navigator.userAgent, tem, 
      matchTest = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
      
      if(/trident/i.test(matchTest[1])){
          tem =  /\brv[ :]+(\d+)/g.exec(userAgent) || [];
          return 'IE '+(tem[1] || '');
      }
      if(matchTest[1]=== 'Chrome'){
          tem = userAgent.match(/\b(OPR|Edg)\/(\d+)/);
          if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
      }
      matchTest= matchTest[2]? [matchTest[1], matchTest[2]]: [navigator.appName, navigator.appVersion, '-?'];
      if((tem= userAgent.match(/version\/(\d+)/i))!= null) matchTest.splice(1, 1, tem[1]);
      return matchTest.join(' ');
  }
}

Here, the detectBrowserName() and detectBrowserVersion() functions are being used here to identify the browser name and browser version.

Step 3: Display Browser Name and Version

The next step is to utilise the interpolation to show the browser name and version with the aid of the interpolation now that we have created the login for detecting the browser name and browser version.

The user can associate a value with a UI element by using double curly brackets to construct an interpolation.

Also, we will use the angular pipe to transform the value in the title case.

Update app.component.html file by below code.

<div class="container mt-5">
  
  <h2>Angular Display Browser Name and Version Example</h2>
  
  <table class="table table-striped mt-5">
    <thead>
        <tr>
          <th>Browser Name</th>
          <th>Browser Version</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ browserName | titlecase }}</td>
        <td>{{ browserVersion | titlecase }}</td>
      </tr>
    </tbody>
  </table>

Now run application.

Conclusion:

You have learned how to identify browser names and versions in the Angular application from this angular guide. Additionally, we showed you how to use the angular pipe to display the browser name and version.

OUTPUT: