In this article, we are going to find browser version and name in Angular 11. In this article, we will detect browser and version, then we’ll check whether it complies with the minimum accepted version we have set.
Prerequisites!
- Should have a working Angular project. (Create Angular Project)
Table of Content
- Why detect browser and version?
- Create a basic HTML layout in Angular
- Detect Browser and Version in Angular
Why detect browser and version?
There are times when our Angular application does not support certain browsers or certain versions of those browsers. A common example would be Internet Explorer. So, to tackle this problem, we need to find browser version and browser name. This way you can either make an alert notification or redirect to another page to restrict the user.
Create a basic HTML layout in Angular
We are going to show the results to find browser version and browser name in Angular. For that, we will write a basic HTML layout to see the output.
First thing first, create a fresh new Angular Project named “detectBrowser”. Once it’s created, copy the below code in the “app.component.html”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h2 style="text-align: center; padding-bottom: 10%">
Detect Browser Name and Its Version
</h2>
<div style="display: flex">
<!-- browser detect : Name-->
<div style="text-align: center; width: 50%; font-size: 30px">
<label> {{ browserName }} </label>
</div>
<!-- browser detect : Version-->
<div style="text-align: center; width: 50%; font-size: 30px">
<label> {{ browserVersion }} </label>
</div>
</div>
</body>
</html>
The above code is a very minimalistic HTML layout with only 2 fields where the browser name and version would be shown. Now that our HTML layout is made, we will write JavaScript detect browser. Now copy the below code in “app.component.ts”. Here I have only initialized 2 variables for now.
export class AppComponent {
browserName = 'Browser Name';
browserVersion = 'Browser Version';
}
Next, start the project with this command:
ng serve
The image below shows how the project would look once you run it.
Detect Browser and Version in Angular
Now that we are done with setting up a basic layout, let’s move on to the good stuff! Go to the “app.component.ts” file again. The below code is of JavaScript detect browser version and name. Copy and overwrite the whole of the “AppComponent” function list so:
export class AppComponent {
browserName = 'Browser Name';
browserVersion = 'Browser Version';
ngOnInit() {
this.browserName = this.detectBrowserName();
this.browserVersion = this.detectBrowserVersion();
}
detectBrowserName() {
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';
}
}
detectBrowserVersion() {
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(' ');
}
}
Here we have added 2 functions to detect browser and version accordingly. It will detect both and then set the values to the variables browserName and browserVersion. And since these variables are already binded in the HTML layout, you could already see the output now. You can check it against a couple of browsers and see that it works perfectly. After running the project on Chrome, you will see the following output.
So that’s a wrap!
We hope this tutorial helped you learn how to Find Browser Version and Name in Angular 11. You may also want to learn how to add SweetAlerts in Angular project or how to detect internet connection status in Angular 13.
Have a great one!
