Site icon RemoteStack

How to Detect Browser Name and Version in Angular

remotestack

Being a web developer, you might need to implement different conditions based on the different browsers. In this guide, we will share how to detect browser name and version in angular applications using the Window.navigator API.

This quick tutorial helps you cater to such a type of need. You may easily check the browser version and name in angular using the JavaScript Window.navigator and Navigator.userAgent APIs.

The Window.navigator read-only property returns a reference to the Navigator object, which has methods and properties about the application running the script.

The Navigator.userAgent read-only property returns the user agent string for the current browser.

Angular Get Browser Details Example

Set Up Angular CLI

Make sure you have installed the node runtime environment and npm package manager on your development machine in advance.

Thereafter, type the command on the command prompt then execute the given command to install the Angular CLI.

npm install -g @angular/cli

Ignore this step, If Angular CLI is already installed on your system.

Download Angular App

Furthermore, we require to download a latest angular project, go ahead and try the provided command.

ng new ng-blog

Once, the new app is installed, get inside the app folder.

cd ng-blog

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Find Browser Name and Version

To get the browser details, use the findname_browser() and findver_browser() methods in your angular typescript template, therefore add code in 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 {
  
  name_browser = '';
  ver_browser = '';
  
  ngOnInit() {
      this.name_browser = this.findname_browser();
      this.ver_browser = this.findver_browser();
  }

  findname_browser() { 
    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';
    }
  }

  findver_browser(){
      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(' ');
  }
  
}

Update HTML Template

To show the output on the browser, add the variables within the angular html interpolation tags.

Also, append the code in app.component.html file.

  <h2>Angular Browser Details Example</h2>

  <table class="table">
    <thead class="table table-warning">
      <tr>
        <th>Browser Name</th>
        <th>Browser Version</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ name_browser | titlecase }}</td>
        <td>{{ ver_browser | titlecase }}</td>
      </tr>
    </tbody>
  </table>

Invoke Development Server

Now, type the command on the command prompt, hit enter and run the angular development server.

ng serve

On the browser’s address bar, type the mentioned below URL, press enter to check the browser information.

http://localhost:4200

Summary

Throughout this step-by-step guide, we learned how to use a navigator.userAgent browser API to identify browser name and version in angular application.

We hope you liked this tutorial, and it will help you sharpen your skills in angular app development.

Exit mobile version