ItSolutionStuff.com

How to Get Browser Name and Version in Angular?

By Hardik Savani • May 2, 2024
Angular

Hi Dev,

In this short tutorial we will cover an angular get browser name and version. This article goes in detailed on angular get browser name. i would like to show you angular detect browser name. i would like to share with you get browser name in angular. Here, Creating a basic example of get browser version angular.

I will give you very simple example of getting browser name and version in angular. you can easily use this example in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version for detect browser name and version.

in this example i created two functions one is myBrowser() for check browser name and another is getBrowserVersion() for check browser version.

Let's see simple example and use in your app

Example:

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

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements OnInit {

name = 'Angular';

ngOnInit() {

console.log(this.myBrowser());

console.log(this.getBrowserVersion());

}

myBrowser() {

if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {

return 'Opera';

}else if(navigator.userAgent.indexOf("Chrome") != -1 ){

return 'Chrome';

}else if(navigator.userAgent.indexOf("Safari") != -1){

return 'Safari';

}else if(navigator.userAgent.indexOf("Firefox") != -1 ) {

return 'Firefox';

}else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )){

return 'IE';

} else {

return 'unknown';

}

}

getBrowserVersion(){

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

}

}

Output:

Chrome

Chrome 81

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular Material Selected Tab Change Event Example

Read Now →

Angular HttpClient Delete Example | Angular Http Delete Request Example

Read Now →

Angular Show Error Message on Submit Example

Read Now →

How to Disable Enter Key to Submit Form in Angular?

Read Now →

How to Get Index of Ngfor in Angular?

Read Now →

How to Add Validation for URL in Angular?

Read Now →

Angular Checkbox Example | Angular 9/8 Checkbox Tutorial

Read Now →

How to Use Bootstrap Tooltip in Angular?

Read Now →

Angular Get Active Route URL Example

Read Now →

How to Get User Agent in Angular?

Read Now →

Angular Get Parameters from URL Route Example

Read Now →