Angular Tutorials

Angular Detect Browser Name and Version Tutorial Example

In this tutorial, you will learn how to get the browser version and browser name in the Angular application. Sometimes you have a requirement to get a browser version in angular, or you might also need to get a browser name in angular.

Rest assured, this profound guide will surely help you and might be the ultimate elixir for angular development need.

In this guide, we will reveal every instruction that is going to help you learn the technique to check the angular browser name and angular browser version with simple javascript code.

How to Get Browser Version and Name in Angular?

  • Step 1: Install Angular CLI
  • Step 2: Create New Angular Project
  • Step 3: Update TypeScript Template
  • Step 4: Display Browser Name and Version
  • Step 5: Start Angular App

Install Angular CLI

In the next step, we will install the Angular command-line interface (CLI); it is a tool that makes it easier to bootstrap and develop Angular applications.

Run the command to make the angular development more convenient.

npm install -g @angular/cli

Create New Angular Project

We have assumed you have already followed the previous step and install the angular cli.

After that creating a new application is super easy. Just hit the given command.

ng new ng-demo

After you executed the above command, it has automatically generated a skeleton project beneath the folder ng-demo with a stack of files.

Make sure to get into the app folder.

cd ng-demo

Update TypeScript Template

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

In this step, you have to open and update code in src/app/app.component.ts file.

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  browserName = '';
  browserVersion = '';

  
  ngOnInit() {
      this.browserName = this.detectBrowserName();
      this.browserVersion = this.detectBrowserVersion();
  }

   

  detectBrowserName() { 
    const agent = window.navigator.userAgent.toLowerCase()
    switch (true) {
      case agent.indexOf('edge') > -1:
        return 'edge';
      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|Edge)\/(\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(' ');
  }
  
}ʼ’

Display Browser Name and Version

Now that we have written the login for detecting the browser name and browser version, the next step is to use the interpolation to display the browser name and version with the help of the interpolation.

An Interpolation is defined using the double curly braces that permit the user to bind a value to a UI element.

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

In this step, you have to open and update code in src/app/app.component.html file.

<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>
</div>

Start Angular App

Eventually, we must commence the angular development server using the ng command, consequently executing the below command.

ng serve

Open browser and type the given url then hit enter to run the app.

http://localhost:4200

Conclusion

In this angular guide, you have learned how to find out browser names and browser versions in the Angular application. Additionally, we assisted you how to display the browser name and browser version using the angular pipe.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago