How to Get Browser Name and Version in Angular?

By Hardik Savani | May 2, 2020 | 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 and angular 11 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
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: