How to Get Browser Name and Version in Angular?

By Hardik Savani October 20, 2023 Category : 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...

Shares