How to Get Browser Name and Version in 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
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Angular Material Selected Tab Change Event Example
- Angular HttpClient Delete Example | Angular Http Delete Request Example
- Angular Show Error Message on Submit Example
- How to Disable Enter Key to Submit Form in Angular?
- How to Get Index of Ngfor in Angular?
- How to Add Validation for URL in Angular?
- Angular Checkbox Example | Angular 9/8 Checkbox Tutorial
- How to Use Bootstrap Tooltip in Angular?
- Angular Get Active Route URL Example
- How to Get User Agent in Angular?
- Angular Get Parameters from URL Route Example